CSS代码实现三角形和饼图实例

来自:互联网
时间:2019-08-09
阅读:

zQX免费资源网

.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;}

要点zQX免费资源网

transparentzQX免费资源网

拓展扇形zQX免费资源网

zQX免费资源网

border-radius: 50pxzQX免费资源网

饼图思路zQX免费资源网

zQX免费资源网

先建一个圆,然后分左右两块。zQX免费资源网

左右两块里面在包含一个半圆,然后对其做旋转处理,来匹配对应的百分比,溢出隐藏处理zQX免费资源网

注意zQX免费资源网

因为是左右两块,所以要注意溢出隐藏,以达到最终效果zQX免费资源网

注意旋转的中心点zQX免费资源网

如果中心区域掏空的话,注意层级问题zQX免费资源网

如果百分比<=50%,可以不要右边那块zQX免费资源网

百分比跟旋转角度的对应换算(百分比/100*360)zQX免费资源网

例子zQX免费资源网

zQX免费资源网

<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>
返回顶部
顶部