扇形是一種常見的圖形，CSS的繪圖能力也允許我們在網(wǎng)頁中使用扇形。本文將介紹如何使用CSS繪制扇形圖形。

我們使用border-radius屬性來實現(xiàn)一個圓形，同時利用transform屬性把該圓形扭曲成一個橢圓。然后，我們繼續(xù)使用一個扇形的偽元素嵌套在橢圓中，最后通過transform：rotate()函數(shù)實現(xiàn)扇形的旋轉(zhuǎn)。

扇形的HTML：
扇形的CSS：
.fan {
position: relative;
width: 100px;
height: 50px;
background-color: yellowgreen;
border-radius: 50%;
transform: skew(-30deg);
}
.fan:after {
content: "";
position: absolute;
top: 0;
right: 0;
width: 50px;
height: 50px;
background-color: yellowgreen;
border-radius: 0 100% 100% 0 / 50%;
transform-origin: 0 0;
transform: rotate(30deg);
}

上述代碼中，我們把圓形扭曲成了一個橢圓，并在這個橢圓的右上角繪制了一個扇形。利用transform：rotate()屬性來控制扇形的旋轉(zhuǎn)方向和角度。

值得注意的是，通過修改偽元素的內(nèi)容和顏色，我們可以輕松地繪制出不同角度和不同顏色的扇形。