Сегменты в круге с помощью CSS

Создание кругов в CSS с использованием border-radius — обычная практика. Однако можем ли мы добиться аналогичного эффекта с помощью сегментов, подобных круговой диаграмме? В этой статье рассматриваются способы достижения этой цели только с помощью HTML и CSS, исключая использование JavaScript.

Создание сегментов одинакового размера

Один из подходов к созданию сегментов одинакового размера включает в себя создание стоп-листа для conic-gradient() с использованием SCSS. Мы можем создать специальную функцию SCSS stop($c) для генерации этих остановок на основе предоставленных цветов ($c), обеспечивая равный интервал. Эта функция учитывает количество срезов, вычисляет угол среза в процентах и ​​генерирует список стопов с соответствующими процентами.

Например, с палитрой цветов от Coolors мы можем использовать наши стопы () в объявлении conic-gradient():

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

Этот подход позволяет настраивать углы среза, указав другой угол в conic-gradient().