Segmentos en un círculo usando CSS

Crear círculos en CSS usando border-radius es una práctica común. Sin embargo, ¿podemos lograr un efecto similar con segmentos, similar a un gráfico circular? Este artículo profundiza en las formas de lograr esto solo a través de HTML y CSS, excluyendo el uso de JavaScript.

Generación de segmentos del mismo tamaño

Un enfoque para segmentos del mismo tamaño implica generar una lista de exclusión para un gradiente cónico() usando SCSS. Podemos crear una función SCSS personalizada detenida($c) para generar estas paradas en función de los colores proporcionados ($c), asegurando un espaciado igual. Esta función tiene en cuenta el número de cortes, calcula el ángulo de corte como porcentaje y genera una lista de paradas con los porcentajes apropiados.

Por ejemplo, con una paleta de colores de Coolors, podemos usar nuestras paradas () función dentro de una declaración de gradiente cónico():

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

Este enfoque permite ángulos de corte personalizables especificando un ángulo diferente en el gradiente cónico().