CSS のみを使用して円セクターを作成するには?

CSS を使用した円のセクターの描画

問題: Pure を使用して円のセクターを描画する方法CSS?

解決策:

従来の CSS テクニックは、円全体を作成し、それをマスクでオーバーレイして目的のセクターを表示することに重点を置いていました。ただし、より効率的で動的なソリューションを実現するには、複数の背景グラデーションを活用できます:

CSS コード:

.pie {
  border-radius: 50%;
  background-color: green;
}

.ten {
  background-image: linear-gradient(126deg, transparent 50%, white 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

説明:

1. .pie クラスは、背景が緑色で丸みを帯びた円全体を定義します。

2. .ten クラスは、2 つの線形グラデーションをオーバーレイすることによって 10% のセクター (または 126 度) を作成します。

   • 最初のグラデーション (126 度) は白を作成します。
   • 2 番目のグラデーション (90 度) がマスクとして機能し、セクターの背景が表示されます。非セクター領域の緑色の背景。

上記の手法を変更してセクターを作成できます。任意の角度:

.custom-sector {
  background-image:
    linear-gradient((90 + (360 * START_ANGLE / 100))deg, transparent 50%, white 50%),
    linear-gradient(90deg, white 50%, transparent 50%);
}

以上がCSS のみを使用して円セクターを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。