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

CSS を使用して円セクターを描画する

CSS を使用して完全な円を描画するのは簡単ですが、円セクターを作成するのはより難しい場合があります。ただし、複数の背景グラデーションを使用すると、JavaScript に頼らずにこれを実現できます。

グラデーションを使用してセクターを描画

セクターを緑色で表す代わりにエリア内に白や透明の部分を描画することで反転効果を与えることができます。これは、2 つの線形グラデーションを使用して行われます。

• 最初のグラデーションはセクターの角度をカバーし、中間点で透明から白に移行します。
• 2 番目のグラデーションは垂直な角度で始まり、中間点で白から透明に変わります。

たとえば、 10% セクター:

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

最初のグラデーション (126 度) で指定された角度は、90 (360 * パーセンテージ) として計算されます。

例:

<pie class="ten"></pie>
<pie class="twentyfive"></pie>
<pie class="fifty"></pie>
<pie class="seventyfive"></pie>
<pie class="onehundred"></pie>

pie {
    border-radius: 50%;
    background-color: green;
    width: 5em;
    height: 5em;
    float: left;
    margin: 1em;
    border: 2px solid green;
}

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

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

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

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

.onehundred {
    background-image: none;
}

この手法を使用すると、さまざまな変化を持つ円形セクターを作成できます。角度を使用して、CSS を使用してパーセンテージやその他のデータ値を表す多用途な方法を提供します。

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