複数の背景グラデーションを使用して CSS 円セクターを作成するにはどうすればよいですか?

CSS 円セクター描画用の複数の背景グラデーション

純粋な CSS を使用して円を描画するのは簡単ですが、その円のセクターを作成するにはどうすればよいでしょうか?

色の付いた部分を描くより、透明な部分を描いた方が効率的です白。

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

.ten {
    background-image:
        /* 10% = 126deg = 90 + ( 360 * .1 ) */
        linear-gradient(126deg, transparent 50%, white 50%),
        linear-gradient(90deg, white 50%, transparent 50%);
}

50% を超える場合、最初のグラデーションは透明から緑色にブレンドする必要があります:

.seventyfive {
  background-image: linear-gradient(180deg, transparent 50%, green 50%), linear-gradient(90deg, white 50%, transparent 50%);
}

以上が複数の背景グラデーションを使用して CSS 円セクターを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。