Segmentos em um círculo usando CSS

Criar círculos em CSS usando border-radius é uma prática comum. No entanto, podemos conseguir um efeito semelhante com segmentos, semelhante a um gráfico circular? Este artigo investiga maneiras de conseguir isso apenas por meio de HTML e CSS, excluindo o uso de JavaScript.

Gerando segmentos de tamanhos iguais

Uma abordagem para segmentos de tamanhos iguais envolve a geração de uma lista de parada para um gradiente cônico() usando SCSS. Podemos criar uma função SCSS personalizada stops($c) para gerar essas paradas com base nas cores fornecidas ($c), garantindo espaçamento igual. Esta função leva em consideração o número de fatias, calcula o ângulo da fatia em porcentagem e gera uma lista de paradas com porcentagens apropriadas.

Por exemplo, com uma paleta de cores da Coolors, podemos usar nossas paradas () funciona dentro de uma declaração cônica-gradiente():

.pie {
  width: 20em; /* Desired pie diameter */
  aspect-ratio: 1; /* Square element */
  border-radius: 50%; /* Turn square into disc */
  background: conic-gradient(stops($c));
}

Esta abordagem permite ângulos de corte personalizáveis, especificando um ângulo diferente no gradiente cônico().