阅读本文需要基本的数学知识：圆心角、弧度制、三角函数。努力实现了如下效果：当然可以拥抱Svg……这里分享一下纯Css制作圆形进度条的方法，只需要三步！这是一款2+1夹心饼干，绿松石部分是果酱。很明显饼干就是两个div被切成一个圆圈。我们重点看果酱是怎么做出来的：如图所示，大扇区由6个小扇区组成，每个小扇区占整个圆饼的1/15。扇形占据了整个圆形蛋糕的6/15。我们只需要构造一个扇形单元，复制6次，旋转相应的角度连接在一起即可。如何构建扇区？用三角形伪装……如何计算三角形的宽和高？设圆半径$radius为100px，等分式$count为15，则小扇形圆心角为360deg/15，三角形高100px，宽2×100px×tan(360度/15/2).其中360deg/15/2将弧度转换为PI/15(PI==360deg/2)。跨度{宽度：0；高度：0；边框：$radius固体透明；$borderWidth:tan(pi()/$count)*$radius;左边框宽度：$borderWidth；border-right-width:$borderWidth;}数学不好的同学请自行科普...$count为1或2的情况需要特殊处理，因为tan(PI)和tan(PI/2）是无限大的值，不懂的同学请研究切线函数图片：相关代码（其中$diameter=2×$radius为圆直径）：span{@if$count==1{width:$直径;高度：$直径；}@elseif$count==2{width:$diameter;高度：$半径；}@else{宽度：0;高度：0；边框：$radius固体透明；$borderWidth:tan(pi()/$count)*$radius;左边框宽度：$borderWidth；右边框宽度：$borderWidth；}}最后，逐个复制和旋转扇区单位：@for$indexfrom0to$count{span:nth-child(#{$index+1}){$transform:translate(-50%,0)旋转(360deg/$count/2+360deg*$index/$count);$origin:if($count==2,bottom,center);-webkit-转换：$转换米;转换：$转换；-webkit-transform-origin:$origin;转换原点：$原点；}}做完果酱，请添加其他点缀...本例完整代码在这里2017/11/14续由于本例引入了三角函数等数学运算，所以使用Sass预编译。没有安装Sass的同学可以下载编译好的源码打开sector.html看看效果。Sass安装请参考文末安装教程https://segmentfault.com/a/11...本例调试方法：cdsectorsass--watchstyle.scss:style.css--debug-info作者：赤恋小喵我的后花园：https://sunmengyuan.github.io...我的github：https://github.com/sunmengyuan
