Как создать пунктирные круги с равномерным интервалом?

16

Я хотел сделать пунктирный круг с помощью CSS и создал его следующим образом.

Хотя этот процесс может отображать пунктирную окружность, промежуток между концом и началом пунктирной линии стал узким, и разрыв не был равномерным.

.c {
  width: 500px;
  height: 500px;
  border-width: 15px;
  border-style: dashed;
  border-radius: 600px;
}
<div class="c"></div>
Развернуть фрагмент

Есть ли способ сделать разрыв равномерным? Можем ли мы также контролировать разрыв между тире?

Если это невозможно только с помощью CSS, мы рассматриваем возможность использования JavaScript или чего-то подобного.

javascript html css Темани Афиф
источник
4
Что бы ни стоило, только Chrome (и клоны, я полагаю), похоже, имеют проблемы с вашим кодом
Альваро Гонсалес
3
Ага. Выглядит хорошо для меня
Клубника

Ответы:

14

Вот оптимизированная версия conic-gradient()решения, где вы можете легко контролировать количество тире и расстояние между

Показать фрагмент кода

Для полной прозрачности мы считаем mask

Показать фрагмент кода

CSS пунктирный круг с равномерным пространством

Чтобы сделать вещи забавными, мы можем даже рассмотреть более сложную окраску к черточкам:

Показать фрагмент кода

Прозрачные штрихи CSS с коническим градиентом и маской

Вы наверняка захотите какой-то контент внутри, поэтому лучше примените маску / фон к псевдоэлементу, чтобы избежать маскировки контента:

Показать фрагмент кода

Связанный вопрос, чтобы получить больше идей CSS для достижения аналогичного результата: Круговая диаграмма только для CSS - Как добавить интервалы / отступы между срезами? , Вы найдете больше поддерживаемых способов, чем conic-gradient()(на самом деле это не работает в Firefox), но вы обязаны использовать много кода в отличие от вышеупомянутого решения, где требуется только один элемент.

Используя SVG, вам также понадобятся некоторые вычисления, чтобы убедиться, что у вас одинаковый интервал:

svg {
  width:200px;
}
<svg viewBox="-3 -3 106 106">
  <!-- 
    The circumference of the circle is 2*PI*R ~ 314.16
    if we want N dashed we use d=314.16/N
    For N = 20 we have d=15.71
    For a gap of 5 we will have "10.71,5" (d - gap,gap)
  -->
  <circle cx="50" cy="50" r="50" 
    stroke-dasharray="10.71, 5" 
    fill="transparent" 
    stroke="black" 
    stroke-width="5" />
</svg>
Развернуть фрагмент

С помощью переменных CSS мы можем сделать это проще, но это не поддерживается во всех браузерах (на самом деле это не работает в Firefox)

Показать фрагмент кода

Равномерное космическое тире SVG

Мы также можем легко использовать SVG в качестве фона, чтобы сделать вещи более гибкими:

Показать фрагмент кода

При использовании в качестве фона вам нужно вручную установить значение, чтобы каждый раз вам понадобился другой фон. Мы можем только легко изменить цвет, используя SVG в качестве маски;

Показать фрагмент кода

SVG пунктирная граница с равномерным пространством

Темани Афиф
источник
1
Хотя это интересные способы сделать это, они хорошо выглядят в Chrome, но только ваша первая, базовая версия SVG работает в Firefox. Примечательно, что Firefox (даже ночная версия) не поддерживает conic-gradient()или repeating-conic-gradient(). Таким образом, это может быть жизнеспособным подходом в будущем, но это не то, что может быть использовано в данный момент, если требуется кросс-браузерная функциональность.
Макьен
1
Учитывая, что код вопроса OP функционирует правильно в Firefox (то есть их заявленная проблема не существует в Firefox), но существует в Chrome, было бы неплохо изучить различия между, по крайней мере, Chrome (+ клонами) и Firefox, предоставляя код, который функционирует в обоих случаях (или, по крайней мере, в явном виде указывает, что можно использовать сейчас с поддержкой кросс-браузерности).
Макьен
@Makyen, хотя OP-код отлично работает в Firefox, я стараюсь сосредоточиться на контроле части пробела, потому что с базовой границей мы не можем контролировать пробелы. Я также добавляю часть окраски тоже. Я пытаюсь сделать это общим ответом. Что касается градиента, да, у Firefox нет поддержки, но я уверен, что он скоро появится (я все еще удивлен, что они опоздали, Chrome поддерживал это почти два года). Я связался с другим вопросом для более поддерживаемых способов, но он не был очень явным. Обновлю это.
Темани Афиф
3

Используйте stroke-dasharrayс SVG.

svg {
  width: 20vmax;
  height: 20vmax;
}
<svg viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="48" stroke-dasharray="10, 4" fill="transparent" stroke="purple" stroke-width="5" />
</svg>
Развернуть фрагмент

Или вы можете использовать radial-gradient(), repeating-conic-gradient()функцию без Firefox.

.c {
  width: 20vmax;
  height: 20vmax;
  background-image: radial-gradient(#fff 68%, transparent 68% 70%, #fff 70%),
    repeating-conic-gradient(#000 0% 3%, transparent 3% 5%);
}
<div class="c"></div>
Развернуть фрагмент

sanriot
источник
3
conic-gradientпо какой-то причине становится
неровным