使用CSS怎么实现一个三角形和饼图

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

创新互联建站成立于2013年,是专业互联网技术服务公司,拥有项目成都网站设计、网站制作、外贸营销网站建设网站策划,项目实施与项目整合能力。我们以让每一个梦想脱颖而出为使命,1280元忻城做网站,已为上家服务,为忻城各地企业和个人服务,联系电话:028-86922220


 

.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

拓展扇形

使用CSS怎么实现一个三角形和饼图 

border-radius: 50px

饼图思路

使用CSS怎么实现一个三角形和饼图 

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

注意

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

注意旋转的中心点
 

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

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

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

例子

使用CSS怎么实现一个三角形和饼图 



 38%
 
 88%
   

css的三种引入方式

1.行内样式,最直接最简单的一种,直接对HTML标签使用style=""。2.内嵌样式,就是将CSS代码写在之间,并且用

进行声明。3.外部样式,其中链接样式是使用频率最高,最实用的样式,只需要在之间加上

就可以了。其次就是导入样式,导入样式和链接样式比较相似,采用@import样式导入CSS样式表,不建议使用。

关于使用CSS怎么实现一个三角形和饼图问题的解答就分享到这里了,希望以上内容可以对大家有一定的帮助,如果你还有很多疑惑没有解开,可以关注创新互联行业资讯频道了解更多相关知识。


新闻标题:使用CSS怎么实现一个三角形和饼图
转载源于:http://scyanting.com/article/ggsoeh.html