Wie kann ich Kreise mit CSS ohne JavaScript in gleiche oder unterschiedliche Größen segmentieren?

Kreise mit CSS segmentieren

In CSS ist es möglich, kreisförmige Formen mithilfe der Eigenschaft border-radius zu erstellen. Das Hinzufügen von Segmenten zu diesen Kreisen erfordert jedoch weitere Untersuchungen. Lassen Sie uns untersuchen, wie Sie dies ohne JavaScript erreichen können.

Segmente gleicher Größe

Wenn die Segmente keine HTML-Elemente erfordern und gleich groß sind, können wir dies tun Verwenden Sie SCSS, um eine Liste von Stopps für einen Conic-Gradient() zu generieren. Eine benutzerdefinierte SCSS-Funktion kann erstellt werden, um die Stopps gleichmäßig zu verteilen:

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

Mit dieser Funktion können wir die Farben und Winkel für die Segmente innerhalb eines conic-gradient() definieren:

<code class="css">.pie {
    width: 20em; /* desired pie diameter */
    aspect-ratio: 1; /* square element */
    border-radius: 50%; /* disc shape */
    background: conic-gradient(stops(#f94144, #f3722c, #f8961e, #f9c74f, 
        #90be6d, #43aa8b, #577590))
}</code>

Dadurch wird ein Kreis mit gleich großen Segmenten erstellt, die gleichmäßig über den Umfang verteilt sind.

Segmente mit unterschiedlichen Größen

Wenn die Segmente unterschiedliche Größen erfordern, Wir können immer noch eine ähnliche Strategie anwenden. Die Funktion „stops()“ kann geändert werden, um zusätzliche Parameter zu verwenden, die den Start- und Endwinkel für jedes Segment definieren. Innerhalb der Verlaufsdefinition können wir diese Winkel dann für jeden Farbstopp angeben.

Wenn die Segmente außerdem Inhalte oder Animationen enthalten müssen, können wir HTML-Elemente verwenden und diese mithilfe von CSS-Transformationen innerhalb des Kreises positionieren. Indem wir ihre Größe und Winkel sorgfältig anpassen, können wir Segmente erstellen, die sich zu überlappen scheinen und so ein komplexes Design schaffen.

Das obige ist der detaillierte Inhalt vonWie kann ich Kreise mit CSS ohne JavaScript in gleiche oder unterschiedliche Größen segmentieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!