Wie erstelle ich Kreissektoren nur mit CSS?

Kreissektoren mit CSS zeichnen

Problem: Wie zeichne ich einen Kreissektor mit reinem CSS?

Lösung:

Konventionelle CSS-Techniken im Fokus Erstellen Sie den gesamten Kreis und überlagern Sie ihn dann mit einer Maske, um den gewünschten Sektor freizulegen. Für effizientere und dynamischere Lösungen können wir jedoch mehrere Hintergrundverläufe nutzen:

CSS-Code:

.pie {
  border-radius: 50%;
  background-color: green;
}

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

Erklärung:

1. Die .pie-Klasse definiert den Gesamtkreis mit grünem Hintergrund und abgerundet Ecken.

2. Die .ten-Klasse erstellt einen 10 %-Sektor (oder 126 Grad), indem sie zwei lineare Farbverläufe überlagert:

   • Der erste Farbverlauf (126 Grad) erzeugt das Weiß Hintergrund für den Sektor.
   • Der zweite Farbverlauf (90 Grad) fungiert als Maske und zeigt den grünen Hintergrund im Nicht-Sektor an Bereich.

Erweiterung für benutzerdefinierte Sektoren:

Die obige Technik kann geändert werden, um Sektoren mit jedem beliebigen Winkel zu erstellen:

.custom-sector {
  background-image:
    linear-gradient((90 + (360 * START_ANGLE / 100))deg, transparent 50%, white 50%),
    linear-gradient(90deg, white 50%, transparent 50%);
}

Ersetzen Sie START_ANGLE durch den gewünschten Winkel in Grad (0-360), um einen Sektor zu zeichnen, der diesen darstellt Winkel.

Das obige ist der detaillierte Inhalt vonWie erstelle ich Kreissektoren nur mit CSS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!