纯css3实现圆环占比图

圆环占比图可以用canvas实现,可以用svg实现,这里使用css3实现,兼容ie10以上,实现原理

盒模型层叠,css3选装,超出隐藏

实现步骤:

创建5个盒模型(这里使用伪类)

1,.left div   左侧圆环底部背景div

2,.left:after 左侧圆环显示div

3,.right div   右侧圆环底部背景div

4,.right:after 右侧圆环显示div

5,.progress 中间覆盖div,在这里显示文案 比如30%

最终实现代码
 




 
菜鸟教程(runoob.com) 




60%

实现效果

纯css3实现圆环占比图_第1张图片

你可能感兴趣的:(css)