CSS描画扇パターン

今回はCssで扇形のパターンを描く方法についてお届けします。 Cssで扇形のパターンを描く際の注意点を実際に見てみましょう。

この記事を読むには、中心角、ラジアン系、三角関数などの基本的な数学の知識が必要です。

次の効果を達成するために懸命に取り組んでいます:

もちろん、Svg を採用することもできます... ここでは、純粋な CSS を使用して、わずか 3 つのステップでリング

プログレス バー を作成する方法を共有します。

これは2+1のサンドイッチビスケットで、青緑色の部分がジャムです。ビスケットが 2 つの丸い P でできているのは明らかです。ジャムの作り方を実演します。

写真に示すように、大きな扇形の形状は 6 つの小さな扇形のパーツで構成されています。小さな扇形は丸いケーキ全体の1/15を占め、大きな扇形は丸いケーキ全体の6/15を占めます。セクターユニットを構築し、それを 6 つのコピーにコピーし、対応する角度で回転させて接続するだけです。

扇形を作成するにはどうすればよいですか?三角形を使用して偽装します...

三角形の幅と高さを計算するにはどうすればよいですか?円の半径 $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;
}

数学が苦手な生徒は自習してください...

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

Iこの記事の「方法」の事例を読んだ後は、この方法を習得したと信じてください。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

CSS3 で線形グラデーション線形グラデーションを使用する方法

CSS でのホバーマスクの点滅の問題

以上がCSS描画扇パターンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。