CSS3可以用來畫出各種形狀,包括扇形。下面示例使用CSS3畫出一個(gè)90度的扇形。
.circle { width: 0; height: 0; border-radius: 0 0 200px 200px; border-style: solid; border-width: 200px 200px 0 0; border-color: #007bff transparent transparent transparent; }
上面的示例中,我們使用border-radius來設(shè)置邊框的圓角半徑,左下角和右下角為200像素,并且使用transparent來指定邊框顏色透明。使用border-style來指定邊框形狀為實(shí)線,使用border-width來指定邊框?qū)挾龋⑶覂H設(shè)置了前三個(gè)邊框的寬度和顏色,隱式指定了第四個(gè)邊框的顏色為#007bff。
根據(jù)這個(gè)原理,我們可以畫出其他角度的扇形,只需要調(diào)整border-radius的值即可。比如下面示例畫出了一個(gè)45度的扇形。
.circle-45 { width: 0; height: 0; border-radius: 0 0 200px 0; border-style: solid; border-width: 200px 200px 0 0; border-color: #007bff transparent transparent transparent; transform: rotate(45deg); }
上面的示例中,我們使用transform來旋轉(zhuǎn)元素,以達(dá)到畫出角度為45度的扇形的效果。