前端读者 | 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;}

要点

1. 注意各个方向边框值的边框，可以写出不同的等边三角形，等腰三角形，任意三角形...
2. transparent 透明色，这个得必须，也可以设置成跟底色一样的颜色就可以。
3. 把四个边设置不同数值，你会发现CSS三角形的规律的

拓展扇形

border-radius: 50px

饼图

思路

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

注意

1. 因为是左右两块，所以要注意溢出隐藏，以达到最终效果
2. 注意旋转的中心点
3. 如果中心区域掏空的话，注意层级问题
4. 如果百分比<=50%，可以不要右边那块
5. 百分比跟旋转角度的对应换算（百分比/100*360）

例子

    
38%
    

    
88%
    

    

总结

饼图的例子，在测算结果页还是经常会用到的，可以扩展为加载框等其他形式，代码比较简单易懂，相信类似的效果，还有很多方案的，欢迎留言...

转载于:https://www.cnblogs.com/chenrf/p/10030138.html