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

Kreissektoren mit CSS zeichnen

Während das Zeichnen eines vollständigen Kreises mit CSS unkompliziert ist, erfordert das Erstellen eines Sektors einen differenzierteren Ansatz. Mit CSS-Verläufen ist es jedoch möglich, Sektorformen effektiv zu rendern.

Mehrere Verläufe für Sektoren

Anstatt zu versuchen, den gefüllten Teil des Sektors zu zeichnen, sollten Sie darüber nachdenken Konzentration auf die unbesetzten Bereiche. Durch die Definition mehrerer linearer Farbverläufe können Sie die Illusion eines Sektors erzeugen:

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

In diesem Beispiel erstellt die .ten-Klasse einen 10 %-Sektor durch Anwenden von zwei Farbverläufen: einer definiert einen transparenten Bereich und der andere eine weiße Füllung. Durch Bearbeiten des Winkels des ersten Farbverlaufs können Sie die Größe des Sektors anpassen.

Zusätzliches Beispiel

Für komplexere Beispiele, wie z. B. die Definition von Sektoren mit mehr als 50 %, Erwägen Sie, die Reihenfolge der Farbverläufe zu ändern, um das gewünschte Ergebnis zu erzielen Wirkung:

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

Fazit

Durch die Verwendung mehrerer CSS-Verläufe ist es möglich, kreisförmige Sektoren unterschiedlichen Ausmaßes zu erstellen, ohne auf komplexen Code oder externe Bibliotheken zurückgreifen zu müssen. Diese Technik bietet einen vielseitigen und effizienten Ansatz, um Ihren Webanwendungen visuelles Interesse und Funktionalität zu verleihen.

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