您现在的位置是:网站首页> 编程资料编程资料

CSS代码实现三角形和饼图DIV+CSS实现带三角箭头的提示框 用CSS制作三角形和按钮的简单实例CSS仿网易首页的头部菜单栏按钮和三角形制作方法利用CSS伪元素创建带三角形的提示框的实现方法纯CSS绘制三角形箭头图案技术解析css绘制透明三角形解决纯css写三角形在firefox下的锯齿问题

2021-09-04 899人已围观

简介 这篇文章主要介绍了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%
88%

总结

以上所述是小编给大家介绍的CSS代码实现三角形和饼图,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

相关内容

-六神源码网