純Css扇形を描く

この文を読むには、円心角、弧制、三角関数という基本的な数学知識が必要です.
以下の効果を達成するために心血を注ぐ.
もちろんSvgを抱きしめて...ここでは、純粋なCssで円環の進捗バーを作る方法を共有します.3ステップだけです.
これは2+1のビスケットで、青緑色の部分はジャムです.ビスケットは2つの円形に削られたdivであることが明らかになり、ジャムがどのように作られているかを重点的に説明します.
図に示すように、大きな扇形は6つの小さな扇形で構成され、各小さな扇形は円餅全体の1/15を占め、大きな扇形は円餅全体の6/15を占めている.扇形ユニットを構築し、6部コピーして対応する角度で接続するだけです.
扇形の作成方法三角形で偽装...
三角形の幅の高さはどのように計算しますか?円半径$radiusは100 px,等分率$countは15と仮定した.小扇形の円心角は360 deg/15、三角形の高さは100 px、幅は2× 100px × tan(360deg/15/2) .ここで、360 deg/15/2変換アークはPI/15(PI==360 deg/2)となる.

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

数学が下手な学生は自分で科学普及してください...
$countが1または2の場合、tan(PI)およびtan(PI/2)が無限値であるため、知らない学生は正接関数画像を研究してください.
関連コード($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;
    }
}

最後に、セクタユニットをコピーして1つずつ回転します.

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

ジャムが完成しました.他の飾りは自分で追加してください.この例の完全なコードはここにあります.
2017/11/14更新
この例では三角関数などの数学演算を導入しているため,Sassプリコンパイルを用いる.Sassをインストールしていない学生はコンパイルされたソースコードをダウンロードしてsectorを開くことができる.html効果を表示します.
Sassのインストールは参考にしてくださいhttps://segmentfault.com/a/11...記事の末尾にあるインストールチュートリアル.
この例のデバッグ方法:

cd sector
sass --watch style.scss:style.css --debug-info

作者:小にゃん
私の裏庭:https://sunmengyuan.github.io...
私のgithub:https://github.com/sunmengyuan
テキストリンク:https://sunmengyuan.github.io...