CSS 實現圓扇環是一種常見的主要應用場景是繪制圓形的進度條，以便于用戶更直觀的了解讀取進度的情況。這種效果可以通過頁面中的 CSS 屬性來實現，下面簡單介紹其實現方案。

.circle {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
background: #ccc;
}
.circle:before {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 50%;
clip: rect(0, 100px, 200px, 0);
background: #f00;
transform: rotate(30deg);
transform-origin: 50% 100%;
}
.circle:after {
content: '';
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-radius: 50%;
background: #fff;
clip: rect(0, 100px, 200px, 0);
}

上文代碼中，首先通過生成一個 #ccc 背景色的圓形（寬高相同， 因為待實現的效果需生成一個面積相同的圓形），然后利用 :before（偽元素）實現該圓形區域旋轉 30 度，從而形成了圓扇區樣式，最后通過 clip 屬性限制區域大小，遮擋掉多余部分。:after 同理而留下了未刪除部分當做白色的外圓環。

通過以上代碼實現的效果就實現了一個 30% 的圓扇環圖。