Segmente in einem Kreis unter Verwendung von CSS: Eine Erforschung von Techniken

Erstellen eines Kreises in CSS mit der Eigenschaft Border Radius ist eine bekannte Technik. Ist es jedoch möglich, den Kreis, wie im bereitgestellten Bild dargestellt, zu segmentieren? Es stellt sich die Frage, ob dies erreicht werden kann, ohne sich auf JavaScript und nur durch Html und CSS zu verlassen. Scheiben ohne Elemente zu sein

gleiche Scheiben, die Inhalte oder Animation erfordern ungleiche Scheiben, die Inhalte oder Animation erfordern

gleiche Scheiben, ohne Elemente zu sein. Scheiben. Betrachten Sie zum Beispiel die folgende Palette:
$ c: #f94144, #f3722c, #f8961e, #f9c74f, #90be6d, #43aa8b, #577590; stoppt ($ c) { $ n: Länge ($ C); // Anzahl der Scheiben $ P: 100%/$ n; // Scheibenwinkel als % des Kreises in Scheiben schneiden $ l: (); // Liste der Stopps, zunächst leer @Für $ i von 1 bis $ n { $ l: $ l, n -ten ($ c, $ i) 0% $ i*$ P. } @Return $ l }
Dieser Ansatz erzeugt 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 stoppt ($ c) {{ $ n: Länge ($ C); // Anzahl der Scheiben $ P: 100%/$ n; // Scheibenwinkel als % des Kreises in Scheiben schneiden $ l: (); // Liste der Stopps, zunächst leer @Für $ i von 1 bis $ n { $ l: $ l, n -ten ($ c, $ i) if ($ i & gt; 1, 0%, unquote ('')) if ($ i & lt; $ n, rund ($ i*$ p), unquote ('')) } @Return $ l } Das Ergebnis ist wie folgt:

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

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

Mit nur vier CSS -Erklärungen können wir einen in gleichen Scheiben segmentierten Kreis erstellen. Um die Scheiben zu drehen, geben wir lediglich einen anderen Startwinkel für den Conic-Gradient () an.

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

Live-Demo:

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