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

总结

免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：mmqy2019@163.com进行举报，并提供相关证据，查实之后，将立刻删除涉嫌侵权内容。

猜你喜欢

• CSS3逻辑选择器包括哪些，作用及其用法是什么

  本篇文章给大家介绍一下CSS3中的逻辑选择器，聊聊里面的 4 名成员，希望对大家有所帮助！

• 用HTML5拖放API技术怎样做生成相框功能

  这篇文章主要介绍了HTML5拖放API实现自动生成相框功能,将桌面图片拖入指定地方，生成相框和相关信息。本文通过实例代码详解，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下

• HTML表单元素有哪些，含义是什么

  在HTML表单元素中，关于Action 属性、Method 属性的定义你了解多少，以下是小编为此而整理的相关文章，感兴趣的小伙伴们可以看下具体操作步骤。

• CSS中将图片固定在底部的方法是什么

  方法：1、利用position属性将图片元素设置为固定定位样式，语法为“图片元素{position:fixed;}”；2、利用bottom属性，将固定定位样式的图片元素固定在底部即可，语法为“图片元素{bottom:0;}”。

• 在CSS3中怎么让元素做缩放动画，方法是什么

  css中，可利用“@keyframes”规则、animation和transform属性实现缩放动画效果，语法为“元素{animation:名称 时间}@keyframes 名称{100%{transform:scale(x,y);}}”。