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则相反。

最终的效果如图所示：