## JavaScript を使用せずに CSS で円グラフのセグメントを作成できますか?

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

border-radius を使用して CSS で円を作成するのが一般的です。しかし、円グラフに似たセグメントを使用しても同様の効果を達成できるでしょうか?この記事では、JavaScript の使用を除き、HTML と CSS だけでこれを実現する方法について詳しく説明します。

等しいサイズのセグメントの生成

等しいサイズのセグメントの 1 つのアプローチには、次のストップ リストを生成することが含まれます。 SCSS を使用した conic-gradient()。カスタム SCSS 関数 stop($c) を作成して、指定された色 ($c) に基づいてこれらのストップを生成し、等間隔を確保できます。この関数は、スライスの数を考慮し、スライス角度をパーセンテージとして計算し、適切なパーセンテージでストップのリストを生成します。

たとえば、Coolors のカラー パレットを使用すると、ストップを使用できます。 conic-gradient() 宣言内の () 関数:

<code class="css">.pie {
  width: 20em; /* Desired pie diameter */
  aspect-ratio: 1; /* Square element */
  border-radius: 50%; /* Turn square into disc */
  background: conic-gradient(stops($c));
}</code>

このアプローチでは、conic-gradient() で異なる角度を指定することで、カスタマイズ可能なスライス角度が可能になります。

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