使用CSS怎么实现一个三角形和饼图-创新互联

使用CSS怎么实现一个三角形和饼图？针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

.triangle{width:0;height:0;border-width:50px;border-style:solid;border-color:red blue green yellow;}
.triangle_top{width:0;height: 0;border-width:50px;border-style:solid;border-color:red transparent transparent transparent;}
.triangle_right{width:0;height: 0;border-width:50px;border-style:solid;border-color:transparent blue transparent transparent;}
.triangle_bottom{width:0;height: 0;border-width:50px;border-style:solid;border-color:transparent transparent green transparent;}
.triangle_left{width:0;height: 0;border-width:50px;border-style:solid;border-color:transparent transparent transparent yellow;}

要点

transparent

拓展扇形

border-radius: 50px

饼图思路

先建一个圆，然后分左右两块。
左右两块里面在包含一个半圆，然后对其做旋转处理，来匹配对应的百分比，溢出隐藏处理

注意

因为是左右两块，所以要注意溢出隐藏，以达到最终效果

注意旋转的中心点

如果中心区域掏空的话，注意层级问题

如果百分比<=50%，可以不要右边那块

百分比跟旋转角度的对应换算（百分比/100*360）

例子

 38%