纯 Css 绘制扇形的方法示例

阅读此文需具备基本数学知识：圆心角、弧度制、三角函数。 为实现如下效果呕心沥血： 当然你可以拥抱 Svg…在此分享如何纯 Css 打造圆环进度条，只需三步！ 此物乃 2 + 1 夹心饼干，蓝绿色部分为果酱。显而易见饼干为两个削成了圆形的 div，我们重点演示果酱是怎么制作的： 如图所示，大扇形由 6 个小扇形构成，每一小扇形占整个圆饼的 1/15，大扇形占整个圆饼的 6/15。我们只需构造一个扇形单元，将其复制 6 份后旋转相应角度连接至一起即可。 如何构造扇形？用三角形伪装… 三角形的宽高如何计算？假定圆半径 $radius 为 100px，等分数 $count 为 15。则小扇形的