CSS是一種非常有用的前端技術，有很多應用場景，其中之一就是用來繪制餅狀圖。下面我們就來介紹一下如何用CSS來繪制餅狀圖。

//HTML代碼
<div class="pie-chart">
<div class="slice-part slice-1"></div>
<div class="slice-part slice-2"></div>
<div class="slice-part slice-3"></div>
<div class="slice-part slice-4"></div>
<div class="slice-part slice-5"></div>
</div>
//CSS代碼
.pie-chart {
height: 200px;
width: 200px;
position: relative;
border-radius: 50%;
}
.slice-part {
position: absolute;
height: 100%;
width: 100%;
border-radius: 50%;
clip: rect(0, 100px, 200px, 100px);
}
.slice-1 {
transform: rotate(0deg);
background: #ff5252;
}
.slice-2 {
transform: rotate(72deg);
background: #01c8ff;
}
.slice-3 {
transform: rotate(144deg);
background: #58d68d;
}
.slice-4 {
transform: rotate(216deg);
background: #f1c40f;
}
.slice-5 {
transform: rotate(288deg);
background: #8e44ad;
}

上面的HTML代碼中，我們使用了一個div來作為餅狀圖的容器，然后在其中加入了五個div作為餅狀圖的各個部分。在CSS代碼中，我們使用了border-radius屬性來使餅狀圖呈現(xiàn)圓形，使用了position屬性來對餅狀圖進行定位。在為每個餅狀圖部分設置樣式時，利用了transform屬性來對各個部分進行旋轉(zhuǎn)，同時使用了clip屬性來控制餅狀圖部分的顯示范圍。

這樣，我們就成功地用CSS繪制出了一個餅狀圖，是不是很簡單呢？