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

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%);
}

この例では、.ten クラスは 2 つのグラデーションを適用して 10% のセクターを作成します。1 つは透明領域を定義し、もう 1 つは透明領域を定義します。白い塗りつぶし。最初のグラデーションの角度を操作することで、セクターのサイズを調整できます。

追加の例

50% を超えるセクターの定義など、より複雑な例については、目的の結果を達成するために、グラデーションの順序を変更することを検討してください。効果:

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

結論

複数の CSS グラデーションを利用することで、複雑なコードや外部ライブラリに頼ることなく、さまざまな度合いの円形セクターを作成することができます。この手法は、Web アプリケーションに視覚的な魅力と機能を追加する多用途かつ効率的なアプローチを提供します。

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