css画扇形的学习记录

阅读此文需具备基本数学知识：圆心角、弧度制、三角函数。

如何构造扇形？用三角形伪装...

三角形的宽高如何计算？假定圆半径 $radius 为 100px，等分数 $count 为 15。则小扇形的圆心角为 360deg / 15 ，三角形的高为 100px，宽为 2 × 100px × tan(360deg / 15 / 2) 。其中 360deg / 15 / 2 转化弧度制为 PI / 15 （PI == 360deg / 2）。

span {
    width: 0;
    height: 0;
    border: $radius solid transparent;
    $borderWidth: tan(pi() / $count) * $radius;
    border-left-width: $borderWidth;
    border-right-width: $borderWidth;
}

数学欠佳的同学请自行科普...

 

以上内容摘录自  用户【呆恋小喵】在segmentfault的部分内容 记录在此便于再次翻看及避免找不到原文。

原文地址：https://segmentfault.com/a/1190000011981896