今天就跟大家聊聊有關(guān)使用Css怎么繪制一個(gè)扇形,可能很多人都不太了解,為了讓大家更加了解,小編給大家總結(jié)了以下內(nèi)容,希望大家根據(jù)這篇文章可以有所收獲。
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; } }
最后,復(fù)制并逐一旋轉(zhuǎn)扇形單元:
@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; } }
看完上述內(nèi)容,你們對(duì)使用Css怎么繪制一個(gè)扇形有進(jìn)一步的了解嗎?如果還想了解更多知識(shí)或者相關(guān)內(nèi)容,請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝大家的支持。