Wie kann ich mit CSS ohne JavaScript segmentierte Kreise erstellen?

Segmente in einem Kreis mit CSS

Das Erstellen von Kreisen mit dem Border-Radius-Hack von CSS ist eine gängige Praxis, aber wie erreicht man eine Segmentierung? Aussehen wie auf dem bereitgestellten Bild? Gibt es eine Möglichkeit, dies mit HTML und CSS ohne JavaScript zu erreichen?

Lösung

Lösung 2024

Lassen Sie uns erkunden Verschiedene Fälle, je nachdem, ob die Segmente Elemente sein müssen und ob sie gleich groß sind:

1. Slices müssen keine Elemente sein und sind gleich

In diesem Fall können wir eine Farbpalette nutzen und SCSS verwenden, um einen conic-gradient() zu generieren, der die Slices gleichmäßig verteilt. Mit der Palette von coolors.co können wir beispielsweise eine SCSS-Funktion erstellen:

<code class="scss">@function stops($c) {
  $n: length($c); // number of slices
  $p: 100%/$n; // slice angle as a % of circle
  $l: (); // list of stops, initially empty
  
  @for $i from 1 through $n {
    $l: $l, nth($c, $i) 
        if($i > 1, 0%, unquote(''))
        if($i < $n, round($i*$p), unquote(''))
  }
  
  @return $l
}</code>

Diese Funktion generiert eine Stoppliste für gleiche Slices. Wir können es dann innerhalb eines conic-gradient() verwenden:

<code class="css">.pie {
  width: 20em; /* set width to desired pie diameter */
  aspect-ratio: 1; /* make the element square */
  border-radius: 50%; /* turn square into disc */
  /* equally-sized slices */
  background: conic-gradient(stops($c))
}</code>

Dieser Ansatz ermöglicht es uns, gleiche Segmente zu erstellen, ohne dass separate Elemente erforderlich sind. Das Anpassen des Startwinkels von conic-gradient() ist ebenfalls möglich.

2. Andere Fälle

Wir können zusätzliche Fälle untersuchen, wie zum Beispiel:

• Slices müssen keine Elemente sein, aber sie sind nicht gleich
• Slices brauchen Inhalt/ zum Animieren und sie sind gleich
• Slices brauchen Inhalt/ zum Animieren und sie sind nicht gleich

Jeder dieser Fälle erfordert einzigartige Ansätze und Techniken, die darüber hinausgehen der Umfang der ursprünglichen Abfrage.

Das obige ist der detaillierte Inhalt vonWie kann ich mit CSS ohne JavaScript segmentierte Kreise erstellen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!