Wie kann ich kreisförmige Sektoren nur mit CSS-Verläufen erstellen?

Zeichnen eines Kreissektors mit CSS

Während das Zeichnen eines vollständigen Kreises mit CSS unkompliziert ist, kann das Erstellen eines Kreissektors eine größere Herausforderung darstellen. Durch die Verwendung mehrerer Hintergrundverläufe ist es jedoch möglich, dies zu erreichen, ohne auf JavaScript zurückgreifen zu müssen.

Verläufe zum Zeichnen des Sektors verwenden

Anstatt den Sektor grün darzustellen Im Bereich können Sie einen umgekehrten Effekt erzeugen, indem Sie die weißen oder transparenten Teile zeichnen. Dazu werden zwei lineare Farbverläufe verwendet:

• Der erste Farbverlauf deckt den Winkel des Sektors ab und geht in der Mitte von transparent nach weiß über.
• Der zweite Farbverlauf beginnt in einem senkrechten Winkel und Übergänge von Weiß zu Transparent in der Mitte.

Zum Beispiel, um einen 10 %-Wert zu zeichnen. Sektor:

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

Der im ersten Gradienten angegebene Winkel (126 Grad) wird als 90 (360 * Prozentsatz) berechnet.

Beispiel:

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

Diese Technik ermöglicht die Erstellung von Kreissektoren mit unterschiedlichen Winkeln und bietet so eine vielseitige Möglichkeit, Prozentsätze oder andere Datenwerte darzustellen CSS.

Das obige ist der detaillierte Inhalt vonWie kann ich kreisförmige Sektoren nur mit CSS-Verläufen erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!