CSS畫出半圓，四分之一圓，三角等圖形

圓形

.icon{
    width: 100px;
    height: 100px;
    background: red;
    border-radius: 50%;
  }

半圓

.icon{
    width: 100px;
    height: 50px;
    background: red;
    border-radius: 100px 100px 0 0;
  }

四分之一圓

.icon{
    width: 50px;
    height: 50px;
    background: red;
    border-radius: 100px 0 0 0;
  }

原理：圓，半圓，四分之一圓的實現主要是 border-radius 屬性，設定不同方向的值
分別是 左上，右上，右下，左下

三角形

.icon{
    border: 50px solid red;
		width: 0;
		height: 0;
		border-color: red transparent transparent transparent
  }

原理：border設定大一點，相當於設定了一個矩形，通過border-color設定顏色，不需要的方向則設定 transparent，也可以設定多個方向來實現不同圖形，四個方向都設定相當於矩形

	border-color: red blue yellow green;