css画扇形的学习记录

最新推荐文章于 2024-03-27 21:00:11 发布

roselle_c

最新推荐文章于 2024-03-27 21:00:11 发布

阅读量419

点赞数

分类专栏： css技巧文章标签： css 扇形

css技巧专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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

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

三角形的宽高如何计算？假定圆半径 $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