segmentos em um círculo usando css: uma exploração de técnicas

criando um círculo no CSS usando a propriedade Radius de borda é uma técnica bem conhecida. No entanto, é possível segmentar o círculo, conforme representado na imagem fornecida? A questão surge se isso pode ser alcançado sem depender de JavaScript e apenas através de HTML e CSS. slices without being elements

Equal slices that require content or animationUnequal slices that require content or animation

Equal Slices Without Being Elements
• Leveraging a color palette, SCSS can generate a stop list for a conic-gradient() to create uniform slices. Por exemplo, considere a seguinte paleta:
• $ c: #f94144, #f3722c, #f8961e, #f9c74f, #90be6d, #43aa8b, #577590; paradas ($ c) { $ n: comprimento ($ c); // Número de fatias $ P: 100%/$ n; // Slice Angle como um % de círculo $ l: (); // Lista de paradas, inicialmente vazio @For $ i de 1 a $ n { $ L: $ L, Nth ($ C, $ i) 0% $ i*$ P } @return $ l }
• Essa abordagem gera a seguinte 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%

No entanto, essa saída inclui decimais desnecessários e paradas de padrão explícitas. Portanto, uma função aprimorada é:

@function Stops ($ c) { $ n: comprimento ($ c); // Número de fatias $ P: 100%/$ n; // Slice Angle como um % de círculo $ l: (); // Lista de paradas, inicialmente vazio @For $ i de 1 a $ n { $ L: $ L, NTH ($ C, $ i) if ($ i & gt; 1, 0%, unquete ('')) if ($ i & lt; $ n, redond ($ i*$ p), descote ('')) } @return $ l }

O resultado é o seguinte:

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

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

Esta função gera paradas mais intuitivas. largura: 20em; / * Defina a largura como o diâmetro da torta desejado */ aspecto-razão: 1; / * Faça o elemento quadrado */ Radio de fronteira: 50%; / * Transforme quadrado em disco */ / * fatias de tamanho igual */ Antecedentes: gradiente cônico (paradas ($ c)) }

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

Com apenas quatro declarações CSS, podemos criar um círculo segmentado em fatias iguais. Para girar as fatias, simplesmente especificamos um ângulo de início diferente para o gradiente cônico (). largura: 16em; / * Defina a largura como o diâmetro da torta desejado */ aspecto-razão: 1; / * Faça o elemento da torta quadrado */ Radio de fronteira: 50%; / * Transforme quadrado em disco */ / * fatias de tamanho igual */ fundo: gradiente cônico (de 17deg, #f94144 14%, #f3722c 0%29%, #f8961e 0%43%, #f9c74f 0%57%, #90BE6D 0%71%, #43AA8B 0%86%, #577590 0%) }