CSS技巧:如何利用纯css创建饼图?

追格官方小助手/ 2022年09月29日/ CSS教程/ 浏览 1638

数据分析图中常见的饼图,其实可以通过简单的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;
}

发表评论

暂无评论,抢个沙发...

客服 工单