Wie kann ich CSS-Kreissektoren mit mehreren Hintergrundverläufen erstellen?

Mehrere Hintergrundverläufe für das Zeichnen von Kreissektoren mit CSS

Das Zeichnen eines Kreises mit reinem CSS ist einfach, aber wie erstellen wir einen Sektor dieses Kreises?

Anstatt zu versuchen, den farbigen Teil zu zeichnen, ist es effizienter, die transparenten Teile in Weiß zu zeichnen.

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

Für mehr Bei mehr als 50 % muss der erste Farbverlauf von transparent zur grünen Farbe übergehen:

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

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Kreissektoren mit mehreren Hintergrundverläufen erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!