在網頁制作中，經常會遇到需要制作統計圖的場景。而使用CSS可以非常簡單地實現一個圓環統計圖。

/* HTML結構 */
<div class="pie">
<div class="left"></div>
<div class="right"></div>
<div class="inner"></div>
<p class="percent">50%</p>
</div>
/* CSS樣式 */
.pie {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #ccc;
overflow: hidden;
}
.left,.right {
position: absolute;
width: 100%;
height: 100%;
border-radius: 50%;
clip: rect(0,100px,200px,0);
}
.left {
background-color: #f00;
transform: rotate(-180deg);
}
.right {
background-color: #0f0;
}
.inner {
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
border-radius: 50%;
background-color: #fff;
}
.percent {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
font-size: 36px;
font-weight: bold;
color: #000;
}

首先，在HTML文件中創建一個div元素，設置class屬性為pie。在pie元素里，創建三個子元素，分別為left、right、inner和percent。其中，left、right用來制作圓環的兩條線，inner用來填充空心圓形區域，percent用來顯示百分比。

然后，在CSS樣式中，首先設置pie元素為相對定位，寬高為200px，設為圓形，背景為灰色，超出部分隱藏。left、right元素絕對定位，裁剪出半圓形，border-radius屬性設為50%，使得圓環效果更佳。left元素的背景設置為紅色，右半部分被clip屬性裁剪掉，只顯示圓環的左半部分，然后用transform屬性將圓環旋轉180度，使其顯示出來的部分與右半圓環拼成一個完整的圓環。right元素與left類似，只不過背景顏色為綠色。inner元素也設置為絕對定位，坐標設為（25%，25%），寬高設為50%。percent元素設為絕對定位，坐標設為（50%，50%），用transform屬性將其居中。

最后，運行HTML文件，將鼠標懸停在圓環上，可以看到百分比的顯示效果，這樣一個簡單而又美觀的圓環統計圖就完成啦！