## CSS のみを使用して円をセグメントにスライスできますか?-CSSチュートリアル-php.cn

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

Barbara Streisand

リリース： 2024-10-25 02:25:02

オリジナル

744 人が閲覧しました

## Can You Slice a Circle into Segments Using Only 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 サイトの他の関連記事を参照してください。