扇形是一種常見的圖形，在網頁設計和動態效果中也很常用。今天我們來學習一下如何使用純CSS繪制扇形。

首先，我們需要明確一個概念，那就是“偽元素”。偽元素是指虛擬的元素，可以用來為選擇器添加額外的樣式而不必修改HTML。在本例中，我們將使用:before偽元素來繪制扇形。

.fan {
width: 0;
height: 0;
border-radius: 50%;
border-style: solid;
border-width: 100px 100px 0 0;
border-color: #000 transparent transparent transparent;
position: relative;
}
.fan:before {
content: "";
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #000;
position: absolute;
top: -100px;
left: 0;
}

在這段CSS代碼中，我們首先用border屬性繪制了一個三角形，即一個扇形的一部分。其中，border-width屬性的值表示的是邊框的寬度，border-color屬性的值依次表示上、右、下、左四個方向的邊框顏色，其中只需要第一個方向的邊框是實線，其它三個方向的邊框都是透明的即可。border-radius屬性用來設置邊框的圓角，設置為50%即可繪制圓形。

接下來，我們使用:before偽元素繪制扇形的剩余部分，即一個實心圓。其中，content屬性的值是空字符串，display屬性的值設置為“block”，將偽元素轉換為塊級元素。width和height屬性分別表示圓的寬度和高度，border-radius屬性用來設置圓的圓角，background-color屬性用來設置圓的背景顏色，position屬性用來設置偽元素的位置。

最后，我們將扇形和圓形合并，形成一個完整的扇形。可以看到，這種純CSS繪制扇形的方法非常簡單，只需要用到基本的CSS屬性和偽元素即可。