CSS技巧：如何利用纯css创建饼图？

数据分析图中常见的饼图，其实可以通过简单的css属性来实现。

您可以以使用 conic-gradient 属性来完成。此属性创建一个由渐变组成的图像，其中设置的颜色过渡围绕中心点旋转。您可以使用以下代码行执行此操作

比如我们创建一个饼图结构

<div class="piechart"></div>

通过conic-gradient属性来控制饼图的分部，其中的

rgb(199, 232, 95) 0% 20%

#2C70DB  50% 90%

分别对应颜色，色块分部区域百分比

颜色可以用16进制和rgb控制，区域从0%~100%

.piechart {
  background: conic-gradient(rgb(199, 232, 95) 0% 20%, rgb(96, 139, 43) 20% 50%, #2C70DB  50% 90%,#e3f6fa  90% 100%);
  border-radius: 50%;
  width: 200px;
  height: 200px;
}