Segmente in einem Kreis mithilfe von CSS

Das Erstellen von Kreisen in CSS mithilfe von border-radius ist eine gängige Praxis. Können wir jedoch mit Segmenten einen ähnlichen Effekt erzielen, ähnlich einem Kreisdiagramm? Dieser Artikel befasst sich mit Möglichkeiten, dies allein mit HTML und CSS zu erreichen, ohne die Verwendung von JavaScript.

Generieren von Segmenten gleicher Größe

Ein Ansatz für Segmente gleicher Größe besteht darin, eine Stoppliste für zu erstellen ein conic-gradient() mit SCSS. Wir können eine benutzerdefinierte SCSS-Funktion „stops($c)“ erstellen, um diese Stopps basierend auf den bereitgestellten Farben ($c) zu generieren und so gleiche Abstände sicherzustellen. Diese Funktion berücksichtigt die Anzahl der Slices, berechnet den Slice-Winkel als Prozentsatz und generiert eine Liste von Stopps mit entsprechenden Prozentsätzen.

Zum Beispiel können wir mit einer Farbpalette von Coolors unsere Stopps verwenden ()-Funktion innerhalb einer conic-gradient()-Deklaration:

.pie {
  width: 20em; /* Desired pie diameter */
  aspect-ratio: 1; /* Square element */
  border-radius: 50%; /* Turn square into disc */
  background: conic-gradient(stops($c));
}

Dieser Ansatz ermöglicht anpassbare Schnittwinkel durch Angabe eines anderen Winkels im conic-gradient().