使用Css怎么绘制一个扇形

今天就跟大家聊聊有关使用CSS怎么绘制一个扇形，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

span {    @if $count == 1 {        width: $diameter;        height: $diameter;    } @else if $count == 2 {        width: $diameter;        height: $radius;    } @else {        width: 0;        height: 0;        border: $radius solid transparent;        $borderWidth: tan(pi() / $count) * $radius;        border-left-width: $borderWidth;        border-right-width: $borderWidth;    }}

最后，复制并逐一旋转扇形单元：

@for $index from 0 to $count {    span:nth-child(#{$index + 1}) {        $transfORM: translate(-50%, 0) rotate(360deg / $count / 2 + 360deg * $index / $count);        $origin: if($count == 2, bottom, center);        -WEBkit-transform: $transform;                transform: $transform;        -webkit-transform-origin: $origin;                transform-origin: $origin;    }}

看完上述内容，你们对使用Css怎么绘制一个扇形有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注编程网精选频道，感谢大家的支持。