CSS を使用して円内にセグメントを作成し、さまざまなスライス要件を処理するにはどうすればよいでしょうか?

CSS を使用した円のセグメント: さまざまなスライス要件の処理

CSS では境界線半径ハックを使用して円を作成できますが、この手法を拡張します。セグメントを含めるのは困難です。ただし、CSS と SCSS を組み合わせて、JavaScript に頼らずにこれを実現する解決策があります。

等しいスライスの生成

スライスに個別の要素が必要ない場合は、のサイズが等しい場合、SCSS は円錐勾配のストップのリストを生成する柔軟性を提供します。カラー パレットを指定すると、SCSS 関数は円の周りにストップを均等に分散できます。

<code class="scss">@function stops($c) {
  $n: length($c);
  $p: 100%/$n;
  $l: ();

  @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>

セグメントに円錐グラデーションを使用する

生成されたストップ リストでは、円錐グラデーションは、円形要素上にセグメントをペイントするために使用されます。等しいサイズのセグメントの場合、コードは簡単です:

<code class="css">.pie {
  width: 20em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(stops($c))
}</code>

開始角度の制御

セグメントが特定の角度 (12 度以外) で開始されるようにするにはクロック)、from キーワードを conic-gradient() に追加できます:

<code class="css">background: conic-gradient(from 17deg, stops($c))</code>

コンテンツリッチなスライスの処理

コンテンツが必要なセグメントまたは必要なセグメントの場合アニメーションが円の外にある場合は、より複雑なアプローチが必要です。これには、疑似要素と CSS アニメーションを使用して目的の結果を達成することが含まれます。

以上がCSS を使用して円内にセグメントを作成し、さまざまなスライス要件を処理するにはどうすればよいでしょうか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。