在數據可視化方面，扇形圖是一種常見的統計圖形，可以簡單直觀地展示數據的比例關系。下面介紹如何使用 CSS 實現扇形圖。

// HTML
<div class="pie">
<div class="slice slice-1"></div>
<div class="slice slice-2"></div>
<div class="slice slice-3"></div>
<div class="slice slice-4"></div>
<div class="slice slice-5"></div>
</div>
// CSS
.pie {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #ddd;
}
.slice {
position: absolute;
width: 100%;
height: 100%;
clip: rect(0, 50px, 200px, 0);
transform-origin: 100% 100%;
}
.slice-1 {
background-color: red;
transform: rotate(0deg);
}
.slice-2 {
background-color: orange;
transform: rotate(72deg);
}
.slice-3 {
background-color: yellow;
transform: rotate(144deg);
}
.slice-4 {
background-color: green;
transform: rotate(216deg);
}
.slice-5 {
background-color: blue;
transform: rotate(288deg);
}

首先，創建一個含有多個子 div 的容器 div，設置容器的寬高和圓角半徑，呈現圓形。再給每個子 div 設置絕對定位、寬高完全占滿父容器、clip 屬性剪裁不需要的部分，以及旋轉角度。為了不讓這些子 div 重疊在一起，需要給它們分別設置不同的旋轉角度，且角度值隨著子 div 的數量而遞增。

這樣就可以實現一個簡單的扇形圖，如果需要添加標簽或動畫效果等，可以進一步修改 CSS。