## Können Sie einen Kreis nur mit CSS in Segmente zerlegen?

Segmente in einem Kreis mit CSS: Eine Erkundung der Techniken

Das Erstellen eines Kreises in CSS mithilfe der Eigenschaft „Randradius“ ist eine bekannte Methode Technik. Ist es jedoch möglich, den Kreis wie im bereitgestellten Bild dargestellt zu segmentieren? Es stellt sich die Frage, ob dies ohne den Einsatz von JavaScript und ausschließlich durch HTML und CSS erreicht werden kann.

Lösung für 2024

Um in dieses Problem einzutauchen, werden wir es kategorisieren verschiedene Szenarien:

• Gleiche Slices, ohne Elemente zu sein
• Ungleiche Slices, ohne Elemente zu sein
• Gleiche Slices, die Inhalt oder Animation erfordern
• Ungleiche Slices, die erfordern Inhalt oder Animation

Gleiche Scheiben, ohne Elemente zu sein

Mithilfe einer Farbpalette kann SCSS eine Stoppliste für die Erstellung eines conic-gradient() erstellen gleichmäßige Scheiben. Betrachten Sie zum Beispiel die folgende Palette:

$c: #f94144, #f3722c, #f8961e, #f9c74f, #90be6d, #43aa8b, #577590;

Wir definieren eine SCSS-Funktion, um gleichmäßig beabstandete Slices zu generieren:

@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) 0% $i*$p
    }
    
    @return $l
}

Dieser Ansatz generiert die folgende Liste von Stopps:

#f94144 0% 14.2857142857%, #f3722c 0% 28.5714285714%,
#f8961e 0% 42.8571428571%, #f9c74f 0% 57.1428571429%,
#90be6d 0% 71.4285714286%, #43aa8b 0% 85.7142857143%,
#577590 0% 100%

Diese Ausgabe enthält jedoch unnötige Dezimalstellen und explizite Standardstopps. Daher ist eine verbesserte Funktion:

@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
}

Das Ergebnis ist wie folgt:

#f94144 14%, #f3722c 0% 29%, #f8961e 0% 43%, #f9c74f 0% 57%,
#90be6d 0% 71%, #43aa8b 0% 86%, #577590 0%

Diese Funktion generiert intuitivere Stopps.

Um dies in einem Kegelschnitt zu nutzen -gradient() definieren wir die folgende Klasse:

.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))
}

Mit nur vier CSS-Deklarationen können wir einen Kreis erstellen, der in gleiche Scheiben segmentiert ist. Um die Slices zu drehen, geben wir einfach einen anderen Startwinkel für den conic-gradient() an.

background: conic-gradient(from 17deg, stops($c))

Live-Demo:

<code class="html"><div class="pie"></div>

<code class="css">.pie {
  width: 16em; /* set width to desired pie diameter */
  aspect-ratio: 1; /* make pie element square */
  border-radius: 50%; /* turn square into disc */
  /* equally sized slices */
  background: 
    conic-gradient(from 17deg, #f94144 14%, #f3722c 0% 29%, #f8961e 0% 43%, 
        #f9c74f 0% 57%, #90be6d 0% 71%, #43aa8b 0% 86%, #577590 0%)
}</code>

Das obige ist der detaillierte Inhalt von## Können Sie einen Kreis nur mit CSS in Segmente zerlegen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!