JavaScript を使用せずに CSS を使用してセグメント化された円を作成するにはどうすればよいですか?

CSS を使用した円のセグメント

CSS の境界線半径ハックを使用して円を作成するのは一般的な方法ですが、セグメント化を実現するにはどうすればよいですか?提供された画像に描かれているような外観ですか? JavaScript を除く HTML と CSS を使用してこれを実現する方法はありますか?

ソリューション

2024 ソリューション

見てみましょうセグメントが要素である必要があるかどうか、およびセグメントのサイズが等しいかどうかに基づいてさまざまなケースが考えられます:

1.スライスは要素である必要はなく、等しいものです

この場合、色のパレットを活用し、SCSS を使用してスライスを均等に分散する conic-gradient() を生成できます。たとえば、coolors.co のパレットを使用して、SCSS 関数を作成できます。

<code class="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) 
        if($i > 1, 0%, unquote(''))
        if($i < $n, round($i*$p), unquote(''))
  }
  
  @return $l
}</code>

この関数は、等しいスライスのストップ リストを生成します。次に、これを conic-gradient() 内で使用できます。

<code class="css">.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))
}</code>

このアプローチにより、個別の要素を必要とせずに等しいセグメントを作成できます。 conic-gradient() の開始角度の調整も可能になります。

2.その他のケース

次のような追加のケースも検討できます。

• スライスは要素である必要はありませんが、等しくありません
• スライスは要素である必要がありますコンテンツ/アニメーション化するにはコンテンツが必要ですが、それらは等しくありません
• スライスにはコンテンツが必要です/アニメーション化するにはコンテンツが必要ですが、それらは等しくありません

各ケースでは、次のような独自のアプローチとテクニックが必要です。元のクエリのスコープ。

以上がJavaScript を使用せずに CSS を使用してセグメント化された円を作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。