利用CSS-border属性实现圆饼图表_html/css_WEB-ITnose

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了利用CSS-border属性实现圆饼图表_html/css_WEB-ITnose，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4812字，纯文字阅读大概需要7分钟。

内容图文

像这样的图表如果只平分四等分的话，实现起来还是挺简单的：

html代码：

CSS代码：

.border-i{    float:left;    width:80px;    height:80px;    border-radius:40px;    background:#ffd203;    overflow:hidden;    position:relative;    }.border-i i{    width:0;    height:0;    border:40px transparent dotted;    position:absolute;}.border-i .i1{    right:-40px;    top:-40px;}.border-i .i2{    right:-40px;    bottom:-40px;}.border-i .i3{    left:-40px;    bottom:-40px;}.border-i .i4{    left:-40px;    top:-40px;}

现在刚好把一个圆饼平分了四等分，如要不同颜色显示直接改变其border-color即可。

原理如下图，一个带有圆角的容器里面有四个宽高和自己一样的子元素平铺排列，然后溢出隐藏。

所以，如果比例占5%的话(默认宽高都80像素)，

h=40*tan(360deg*5%);

结果约等于13px,那css代码如下：

.border-i .i2{    top:-40px;    right:-13px;    border-right:13px solid  #fd9500;}

呈现效果如下:

可以看出只要控制了圆饼的四分之一即0%~25%，那其他的25%~50%、50%~75%、75%~100%原理都一样，

其中除去几个特殊值:

    /* 0% *//* 所有border-color默认透明； */　　/* 25% */.border-i .i2{border:40px #fd9500 solid;}　　/* 50% */.border-i .i2,.border-i .i3{border:40px #fd9500 solid;}　　/* 75% */.border-i .i2,.border-i .i3,.border-i .i4{border:40px #fd9500 solid;}　　/* 100% */.border-i .i1,.border-i .i2,.border-i .i3,.border-i .i4{border:40px #fd9500 solid;}

其他的计算原理都一样：

/* *设 A = 5%~25%; *  H = 40 * tan(360deg * A%); */.border-i .i1{        right: -Hpx;        border-left: Hpx solid #fd9500;}/* *设 B = 25%~50%; *  H = 40 * tan(360deg *(B% - 25%)); */.pct30 .i1{border-color: #fd9500;}.pct30 .i2{    bottom: -Hpx;    border-top: Hpx solid #fd9500;}/* *设 C = 50%~75%; *  H = 40 * tan(360deg *(C% - 50%)); */.pct55 .i1, .pct55 .i2{border-color: #fd9500;}.pct55 .i3{    left: -Hpx;    border-right: Hpx solid #fd9500;}/* *设 D = 75%~100%; *  H = 40 * tan(360deg *(D% - 75%)); */.pct80 .i1, .pct80 .i2, .pct80 .i3{border-color: #fd9500;}.pct80 .i4{    top: -Hpx;    border-bottom: Hpx solid #fd9500;}

最后Demo效果如下：

Demo源码：

            
                                        
0%
    
    
                                        
15%
    
    
                                        
25%
    
    
                                        
40%
    
    
                                        
50%
    
    
                                        
65%
    
    
                                        
75%
    
    
                                        
90%
    
    
                                        
100%
    

如果要兼容IE8以下的浏览器的圆角（border-radius），就加一个尺寸一样的遮罩层，背景为圆形镂空背景色的纯色png图片：

在body底部

内容总结

以上是互联网集市为您收集整理的利用CSS-border属性实现圆饼图表_html/css_WEB-ITnose全部内容，希望文章能够帮你解决利用CSS-border属性实现圆饼图表_html/css_WEB-ITnose所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端