en un círculo usando css: una exploración de técnicas

creando un círculo en CSS usando la propiedad de radio fronterizo es una técnica conocida. Sin embargo, ¿es posible segmentar el círculo como se muestra en la imagen provista? La pregunta surge si esto se puede lograr sin confiar en JavaScript y únicamente a través de html y css.

para 2024

para profundizar en este tema, categorizaremos diferentes escenarios:

iguales sin ser sin ser de Sings sin ser Elementos
rebanadas desiguales sin ser Elementos
Slices iguales que requieren contenido o animación
desigual Detener la lista para un gradiente cónico () para crear rodajas uniformes. Por ejemplo, considere la siguiente paleta:
$ C: #F94144, #F3722C, #F8961e, #F9C74F, #90BE6D, #43AA8B, #577590;

Definimos una función de A SCSS para generar Slices igualmente especiales: [[[ paradas ($ c) { $ N: longitud ($ c); // Número de rodajas $ P: 100%/$ N; // Corte el ángulo como % del círculo $ l: (); // Lista de paradas, inicialmente vacía @For $ i de 1 a $ N { $ l: $ l, nth ($ c, $ i) 0% $ i*$ p } @return $ l } Este enfoque genera la siguiente lista de paradas:

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

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

@Function Stops ($ c) { $ N: longitud ($ c); // Número de rodajas $ P: 100%/$ N; // Corte el ángulo como % del círculo $ l: (); // Lista de paradas, inicialmente vacía @For $ i de 1 a $ N { $ L: $ L, nth ($ C, $ i) if ($ i & gt; 1, 0%, Unquete ('')) if ($ i & lt; $ n, ronda ($ i*$ p), uncote ('')) } @return $ l }

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

#F94144 14%, #F3722C 0%29%, #F8961e 0%43%, #F9C74F 0%57%, #90BE6D 0%71%, #43AA8B 0%86%, #577590 0%

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

para utilizar esto en un grado cónico (), define la clase siguiente:

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

Con solo cuatro declaraciones CSS, podemos crear un círculo segmentado en cortes iguales. Para rotar las cortes, simplemente especificamos un ángulo de inicio diferente para el gradiente cónico ().

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

live demos Ancho: 16em; / * Establecer el ancho del diámetro del pastel deseado */ relación de aspecto: 1; / * hacer elemento de pastel cuadrado */ Radio fronterizo: 50%; / * convertir el cuadrado en disco */ / * Slices de tamaño igualmente */ fondo: Gradiente cónico (de 17deg, #F94144 14%, #F3722C 0%29%, #F8961E 0%43%, #F9C74F 0%57%, #90BE6D 0%71%, #43AA8B 0%86%, #577590 0%) }