CSS畫出半圓,四分之一圓,三角等圖形
阿新 • • 發佈:2020-12-19
圓形
.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;