今回は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; }
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; } }
CSS3 で線形グラデーション線形グラデーションを使用する方法
以上がCSS描画扇パターンの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。