欧美午夜诱惑在线_一区二区三级片_国产成人综合v在线_国产91精品无码免费_高清综合亚洲三级_黄色软件下载观看_上萬網友分享国产精品高潮呻吟久久av心得_美女扒开尿眼无遮挡免费视频_好紧好湿好黄的视频免费_亚洲日韩欧美中字五月天

在實(shí)際應(yīng)用中，我們有時(shí)候會(huì)遇到“如何利用純CSS畫扇形，原理和方法是什么”這樣的問題，我們?cè)撛鯓觼硖幚砟?？下文給大家介紹了解決方法，希望這篇“如何利用純CSS畫扇形，原理和方法是什么”文章能幫助大家解決問題。

閱讀此文需具備基本數(shù)學(xué)知識(shí)：圓心角、弧度制、三角函數(shù)。

為實(shí)現(xiàn)如下效果嘔心瀝血：

當(dāng)然你可以擁抱 Svg...在此分享如何純 Css 打造圓環(huán)進(jìn)度條，只需三步！

此物乃 2 + 1 夾心餅干，藍(lán)綠色部分為果醬。顯而易見餅干為兩個(gè)削成了圓形的 div，我們重點(diǎn)演示果醬是怎么制作的：

如圖所示，大扇形由 6 個(gè)小扇形構(gòu)成，每一小扇形占整個(gè)圓餅的 1/15，大扇形占整個(gè)圓餅的 6/15。我們只需構(gòu)造一個(gè)扇形單元，將其復(fù)制 6 份后旋轉(zhuǎn)相應(yīng)角度連接至一起即可。

如何構(gòu)造扇形？用三角形偽裝...

三角形的寬高如何計(jì)算？假定圓半徑 $radius 為 100px，等分?jǐn)?shù) $count 為 15。則小扇形的圓心角為 360deg / 15，三角形的高為 100px，寬為 2 * 100px * tan(360deg / 15 / 2)。其中 360deg / 15 / 2 轉(zhuǎn)化弧度制為 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;
}

數(shù)學(xué)欠佳的同學(xué)請(qǐng)自行科普...

對(duì)于 $count 為 1 或 2 的情況需特殊處理，因?yàn)?tan(PI) 及 tan(PI / 2) 為無窮值，不了解的同學(xué)請(qǐng)研究正切函數(shù)圖像：

相關(guān)代碼（其中 $diameter = 2 * $radius 為圓直徑）：

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;
    }
}

果醬制作完畢，其它點(diǎn)綴請(qǐng)自行添加嘍...本例完整代碼在此。

到此這篇關(guān)于“如何利用純CSS畫扇形，原理和方法是什么”的文章就介紹到這了,更多相關(guān)如何利用純CSS畫扇形，原理和方法是什么內(nèi)容，歡迎關(guān)注群英網(wǎng)絡(luò)技術(shù)資訊頻道，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：[email protected]進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，查實(shí)之后，將立刻刪除涉嫌侵權(quán)內(nèi)容。

猜你喜歡

• CSS中自定義的屬性怎么做，哪些事項(xiàng)要注意

  css如何實(shí)現(xiàn)自定義的屬性：1、定義一個(gè)自定義屬性需要使用--開始，然后屬性值需要是一個(gè)有效的CSS值。2、css變量的屬性名大小寫敏感。3、使用自定義屬性，需要在var()函數(shù)中使用。

• CSS3中有哪些新加的背景屬性，怎么使用

  CSS3新增屬性：background-clip ，background-origin ， background-size，本文給大家分享CSS3新增的背景屬性，感興趣的朋友跟隨小編一起看看吧

• CSS中高度不確定如何讓元素垂直居中

  這篇文章主要介紹了CSS未知高度垂直居中的實(shí)現(xiàn)，詳細(xì)的介紹了幾種方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

• 如何實(shí)現(xiàn)HTML頁面input只輸入數(shù)字

  如果想讓input文本框只能輸入數(shù)字，也就是不帶小數(shù)點(diǎn)的正整數(shù)數(shù)字，這個(gè)時(shí)候需要將我們的input文本框修改一下，html代碼如下。 inputonkeyup=this.value=this.value.replace(/\D/g,)onblur=this.value=this.value.replace(/\D/g,) onkeyup：表示鍵盤在輸入數(shù)

• CSS中sticky屬性主要用處是什么，怎么應(yīng)用

  css中sticky屬性的特點(diǎn)：1、這個(gè)元素并不脫離文檔流，仍然保留著元素在文檔流中的原始位置。2、當(dāng)元素在容器中滾動(dòng)超過指定偏移值時(shí)，元素固定在容器的指定位置。3、固定元素的相對(duì)偏移是相對(duì)于最接近它的帶滾動(dòng)框的祖先元素。