## CSS のみを使用して円をセグメントにスライスできますか?

CSS を使用した円のセグメント: テクニックの探索

境界線の半径プロパティを使用して CSS で円を作成することはよく知られています。技術。しかし、提供された画像に示されているように円をセグメント化することは可能でしょうか?これを JavaScript に依存せず、HTML と CSS だけで実現できるかどうかという疑問が生じます。

2024 年の解決策

この問題を詳しく調べるために、次のように分類します。さまざまなシナリオ:

• 要素ではない等しいスライス
• 要素ではない不等スライス
• コンテンツまたはアニメーションを必要とする等しいスライス
• 要素ではない不等スライスコンテンツまたはアニメーションが必要です

要素を含まない等しいスライス

カラー パレットを利用して、SCSS は conic-gradient() を作成するためのストップ リストを生成できます。均一なスライス。たとえば、次のパレットについて考えてみましょう:

$c: #f94144, #f3722c, #f8961e, #f9c74f, #90be6d, #43aa8b, #577590;

等間隔のスライスを生成する SCSS 関数を定義します:

@function stops($c) {
    $n: length($c); // number of slices
    $p: 100%/$n; // slice angle as a % of circle
    $l: (); // list of stops, initially empty
    
    @for $i from 1 through $n {
        $l: $l, nth($c, $i) 0% $i*$p
    }
    
    @return $l
}

このアプローチでは、次のストップのリストが生成されます:

#f94144 0% 14.2857142857%, #f3722c 0% 28.5714285714%,
#f8961e 0% 42.8571428571%, #f9c74f 0% 57.1428571429%,
#90be6d 0% 71.4285714286%, #43aa8b 0% 85.7142857143%,
#577590 0% 100%

ただし、この出力には不要な小数点と明示的なデフォルトの停止が含まれています。したがって、改良された関数は次のとおりです。

@function stops($c) {
    $n: length($c); // number of slices
    $p: 100%/$n; // slice angle as a % of circle
    $l: (); // list of stops, initially empty
    
    @for $i from 1 through $n {
        $l: $l, nth($c, $i)
            if($i > 1, 0%, unquote(''))
            if($i < $n, round($i*$p), unquote(''))
    }
    
    @return $l
}

結果は次のようになります。

#f94144 14%, #f3722c 0% 29%, #f8961e 0% 43%, #f9c74f 0% 57%,
#90be6d 0% 71%, #43aa8b 0% 86%, #577590 0%

この関数は、より直感的な停止を生成します。

これを円錐曲線で利用するには-gradient() では、次のクラスを定義します。

.pie {
    width: 20em; /* set width to desired pie diameter */
    aspect-ratio: 1; /* make the element square */
    border-radius: 50%; /* turn square into disc */
    /* equally-sized slices */
    background: conic-gradient(stops($c))
}

たった 4 つの CSS 宣言で、等しいスライスに分割された円を作成できます。スライスを回転するには、conic-gradient() に別の開始角度を指定するだけです。

background: conic-gradient(from 17deg, stops($c))

ライブ デモ:

<code class="html"><div class="pie"></div>

<code class="css">.pie {
  width: 16em; /* set width to desired pie diameter */
  aspect-ratio: 1; /* make pie element square */
  border-radius: 50%; /* turn square into disc */
  /* equally sized slices */
  background: 
    conic-gradient(from 17deg, #f94144 14%, #f3722c 0% 29%, #f8961e 0% 43%, 
        #f9c74f 0% 57%, #90be6d 0% 71%, #43aa8b 0% 86%, #577590 0%)
}</code>

以上が## CSS のみを使用して円をセグメントにスライスできますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。