内容简介:饼图的例子,在测算结果页还是经常会用到的,可以扩展为加载框等其他形式,代码比较简单易懂,相信类似的效果,还有很多方案的,欢迎留言...
.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)
例子
<style> .pie38{width: 100px;height: 100px;border-radius: 50px;margin:20px;background-color: #ddd;position: relative;display: inline-block;overflow: hidden} .pie38 .pie_content{line-height: 100px;text-align: center;position: absolute;width: 100px;height: 100px;z-index: 8} .pie38 .pie_left{position: absolute;top:0;left:0;width: 50px;height: 100px;overflow: hidden;} .pie38 .pie_left:after{content: '';height: 100px;width:50px;border-right:50px solid red;position:absolute;top:0;left:0;transform: rotate(-137deg);} </style> <div class="pie38"> <div class="pie_content">38%</div> <div class="pie_left"></div> </div> 复制代码
<style> .pie88{width: 100px;height: 100px;border-radius: 50px;margin:20px;background-color: #ddd;position: relative;display: inline-block;overflow: hidden;} .pie88 .pie_content{line-height: 100px;text-align: center;position: absolute;width: 100px;height: 100px;z-index: 8} .pie88 .pie_left{position: absolute;top:0;left:0;width: 50px;height: 100px;overflow: hidden;background-color: red} .pie88 .pie_right{position: absolute;top:0;right:0;width: 50px;height: 100px;overflow: hidden;} .pie88 .pie_right:after{content: '';height: 100px;width:50px;border-left:50px solid red;position:absolute;right:0;top:0;border-radius: 50px;transform: rotate(-137deg);} </style> <div class="pie88"> <div class="pie_content">88%</div> <div class="pie_left"></div> <div class="pie_right"></div> </div> 复制代码
总结
饼图的例子,在测算结果页还是经常会用到的,可以扩展为加载框等其他形式,代码比较简单易懂,相信类似的效果,还有很多方案的,欢迎留言...
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- go gl 彩色的三角形
- 【Leetcode】120.三角形最小路径和
- 【WPF】用三角形网格构建三维图形
- 音视频之opengl绘制三角形
- C++数字三角形问题与DP算法
- 蓝桥杯 ADV-135 算法提高 三角形面积
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。