CSS可以通過簡單的代碼讓我們輕松地畫出環形圖，下面將為大家介紹具體實現方法。

//HTML部分
<div class="circle-wrap">
<div class="circle-inner">
<div class="circle-left"></div>
<div class="circle-right"></div>
</div>
</div>
//CSS部分
.circle-wrap {
width: 200px;
height: 200px;
border-radius: 50%;
background-color: #e2e2e2;
position: relative;
}
.circle-inner {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
border-radius: 50%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 36px;
font-weight: bold;
color: #333;
}
.circle-left, .circle-right {
position: absolute;
width: 50%;
height: 100%;
border-radius: 50%;
clip: rect(0px, 100px, 200px, 0px);
}
.circle-left {
background-color: #00a0e9;
transform-origin: right center;
transform: rotate(0deg);
}
.circle-right {
background-color: #fe6561;
transform-origin: left center;
transform: rotate(180deg);
}

代碼中的.circle-wrap是一個圓形的網格容器，.circle-inner在其中占據80%的空間，設置了圓角，白色背景以及居中對齊。.circle-left和.circle-right則分別代表環形圖左邊和右邊的部分，設置了50%的寬度和100%的高度，通過clip屬性切割掉多余部分。使用transform屬性，.circle-left實現右邊為0°，左邊為180°的旋轉，而.circle-right則相反。

最終的效果如圖所示：