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

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

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

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

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

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

このアプローチでは、conic-gradient().