运用CSS怎样画三角形和饼图，方法是什么

发布时间：2023-10-05 14:27:54 所属栏目：语言来源：

导读：这篇文章主要介绍“用CSS怎样画三角形和饼图，方法是什么”，有一些人在用CSS怎样画三角形和饼图，方法是什么的问题上存在疑惑，接下来小编就给大家来介绍一下相关的内容，希望对大家解答有帮助，有这个方

这篇文章主要介绍“用CSS怎样画三角形和饼图，方法是什么”，有一些人在用CSS怎样画三角形和饼图，方法是什么的问题上存在疑惑，接下来小编就给大家来介绍一下相关的内容，希望对大家解答有帮助，有这个方面学习需要的朋友就继续往下看吧。

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

（编辑：聊城站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!