Як створити пунктирні кола з рівномірним проміжком?

Я хотів зробити пунктирне коло з CSS і створив його наступним процесом.

Хоча за допомогою цього процесу можна було відобразити пунктирне коло, проміжок між кінцем і початком пунктирної лінії став вузьким, а проміжок не був рівномірним.

.c {
  width: 500px;
  height: 500px;
  border-width: 15px;
  border-style: dashed;
  border-radius: 600px;
}

<div class="c"></div>

Розгорніть фрагмент

Чи є спосіб зробити проміжок рівномірним? чи можемо ми також контролювати розрив між тире?

Якщо це неможливо лише з CSS, ми розглядаємо можливість використання JavaScript або чогось подібного.

javascript html css

— Темані Афіф
джерело

Оскільки це варте, лише Chrome (і клони, я думаю) мають проблеми з вашим кодом.

— Альваро Гонсалес

Так. Мені добре виглядає

— Полуниця

Ось оптимізована версія conic-gradient()рішення, де ви можете легко контролювати кількість тире та пробіл між ними

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

.box {
  --d:4deg; /* distance between dashes */
  --n:30;   /* number of dashes */
  --c:#000; /* color of dashes */
  width: 180px;
  display:inline-block;
  border-radius:50%;
  border:2px solid transparent; /* control the thickness of border*/
  background: 
    linear-gradient(#fff,#fff) padding-box padding-box,
    repeating-conic-gradient(
        var(--c)    0 calc(360deg/var(--n) - var(--d)), 
        transparent 0 calc(360deg/var(--n)) 
    ) border-box;
}

/* keep the element square */
.box:before {
  content:"";
  display:block;
  padding-top:100%;
}

<div class="box"></div>

<div class="box" style="--n:20;border-width:5px;width:150px"></div>

<div class="box" style="--n:8;--d:20deg;border-width:5px;width:150px"></div>

<div class="box" style="--n:10;--d:15deg;border-width:3px;width:100px"></div>

<div class="box" style="--n:10;--d:20deg;border-width:3px;width:100px"></div>

Розгорніть фрагмент

Ми маємо на увазі повну прозорість mask

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

.box {
  --d:4deg; /* distance between dashes */
  --n:30;   /* number of dashes */
  --c:#000; /* color of dashes */
  --b:2px;   /* control the thickness of border*/
  
  width: 180px;
  display:inline-block;
  border-radius:50%;
  background: 
    repeating-conic-gradient(
        var(--c)    0 calc(360deg/var(--n) - var(--d)), 
        transparent 0 calc(360deg/var(--n)));
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--b)),#fff calc(100% - var(--b) + 1px));
          mask:radial-gradient(farthest-side,transparent calc(100% - var(--b)),#fff calc(100% - var(--b) + 1px));
}

/* keep the element square */
.box:before {
  content:"";
  display:block;
  padding-top:100%;
}


body {
  background:linear-gradient(to right,yellow,pink);
}

<div class="box"></div>

<div class="box" style="--n:20;--b:5px;width:150px;--c:blue"></div>

<div class="box" style="--n:8;--d:20deg;--b:10px;width:130px;--c:red"></div>

<div class="box" style="--n:18;--d:12deg;--b:8px;width:100px;--c:green"></div>

<div class="box" style="--n:10;--d:20deg;--b:3px;width:100px;--c:purple"></div>

Розгорніть фрагмент

Щоб зробити речі смішними, ми можемо розглянути навіть більш складне забарвлення дефісів:

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

.box {
  --d:4deg; /* distance between dashes */
  --n:30;   /* number of dashes */
  --b:2px;   /* control the thickness of border*/
  
  width: 180px;
  display:inline-block;
  border-radius:50%;
  background:linear-gradient(red,blue);
  -webkit-mask:
      radial-gradient(farthest-side,transparent calc(100% - var(--b)),#fff calc(100% - var(--b) + 1px)),
      repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--d)),transparent 0 calc(360deg/var(--n)));
  -webkit-mask-composite: source-in;
          mask:
      radial-gradient(farthest-side,transparent calc(100% - var(--b)),#fff calc(100% - var(--b) + 1px)),
      repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--d)),transparent 0 calc(360deg/var(--n)));
          mask-composite: intersect;
}

/* keep the element square */
.box:before {
  content:"";
  display:block;
  padding-top:100%;
}


body {
  background:linear-gradient(to right,yellow,pink);
}

<div class="box"></div>

<div class="box" style="--n:20;--b:5px;width:150px;background:conic-gradient(green,orange,black)"></div>

<div class="box" style="--n:8;--d:20deg;--b:10px;width:130px;background:conic-gradient(black,white,black)"></div>

<div class="box" style="--n:18;--d:12deg;--b:8px;width:100px;background:linear-gradient(60deg,red 50%,green 0)"></div>

<div class="box" style="--n:10;--d:20deg;--b:3px;width:100px;background:#fff"></div>

Розгорніть фрагмент

Напевно ви хочете, щоб якийсь вміст всередині був таким, що краще застосувати маску / фон на псевдоелементі, щоб уникнути маскування вмісту:

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

.box {
  --d:4deg; /* distance between dashes */
  --n:30;   /* number of dashes */
  --b:2px;   /* control the thickness of border*/
  
  width: 180px;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  font-size:35px;
  border-radius:50%;
  position:relative;
}
.box::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  border-radius:inherit;
  background:var(--c,linear-gradient(red,blue));
  -webkit-mask:
      radial-gradient(farthest-side,transparent calc(100% - var(--b)),#fff calc(100% - var(--b) + 1px)),
      repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--d)),transparent 0 calc(360deg/var(--n)));
  -webkit-mask-composite: source-in;
          mask:
      radial-gradient(farthest-side,transparent calc(100% - var(--b)),#fff calc(100% - var(--b) + 1px)),
      repeating-conic-gradient(#000 0 calc(360deg/var(--n) - var(--d)),transparent 0 calc(360deg/var(--n)));
          mask-composite: intersect;
  
}

/* keep the element square */
.box:before {
  content:"";
  padding-top:100%;
}


body {
  background:linear-gradient(to right,yellow,pink);
}

<div class="box">19</div>

<div class="box" style="--n:20;--b:5px;width:150px;--c:conic-gradient(green,orange,black)">17</div>

<div class="box" style="--n:8;--d:20deg;--b:10px;width:130px;--c:conic-gradient(black,white,black)">5</div>

<div class="box" style="--n:18;--d:12deg;--b:8px;width:100px;--c:linear-gradient(60deg,red 50%,green 0)">9</div>

<div class="box" style="--n:10;--d:20deg;--b:3px;width:100px;--c:#fff">13</div>

Розгорніть фрагмент

Пов’язане запитання, щоб отримати більше ідей 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 {
  --n:20; /* number of dashes*/
  --d:5;  /* distance */
  width:200px;
}

svg circle {
   stroke-dasharray:calc((2*3.14*50)/var(--n) - var(--d)), var(--d); 
}

<svg viewBox="-3 -3 106 106">
  <circle cx="50" cy="50" r="50" fill="transparent" stroke="black" stroke-width="5" />
</svg>

<svg viewBox="-3 -3 106 106" style="width:150px;--n:20;--d:10">
  <circle cx="50" cy="50" r="50" fill="transparent" stroke="red"   stroke-width="5" />
</svg>

<svg viewBox="-3 -3 106 106" style="width:100px;--n:8;--d:15">
  <circle cx="50" cy="50" r="50" fill="transparent" stroke="green" stroke-width="5" />
</svg>

Розгорніть фрагмент

Ми також можемо легко використовувати SVG як фон, щоб зробити речі більш гнучкими:

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

.box {
  display:inline-block;
  width:200px;
  background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-3 -3 106 106"><circle cx="50" cy="50" r="50" fill="transparent" stroke="black" stroke-width="5" style="stroke-dasharray:29.25, 10" /></svg>') center/contain;
}

.box:before {
  content:"";
  display:block;
  padding-top:100%;
}

<div class="box">

</div>

<div class="box" style="width:150px;">

</div>

<div class="box" style="width:100px;">

</div>

Розгорніть фрагмент

Якщо ви використовуєте як фон, вам потрібно вручну встановити значення, тож вам буде потрібно кожен раз інший фон. Ми можемо зробити колір легко змінити, використовуючи SVG як маску;

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

.box {
  display:inline-block;
  width:200px;
  position:relative;
}

.box:before {
  content:"";
  display:block;
  padding-top:100%;
}

.box::after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:-1;
  background:var(--c,red);
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-3 -3 106 106"><circle cx="50" cy="50" r="50" fill="transparent" stroke="black" stroke-width="5" style="stroke-dasharray:29.25, 10" /></svg>') center/contain;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="-3 -3 106 106"><circle cx="50" cy="50" r="50" fill="transparent" stroke="black" stroke-width="5" style="stroke-dasharray:29.25, 10" /></svg>') center/contain;
}

<div class="box">

</div>

<div class="box" style="width:150px;--c:linear-gradient(60deg,green 50%,yellow 0);">

</div>

<div class="box" style="width:100px;--c:linear-gradient(red,blue)">

</div>

Розгорніть фрагмент

— Темані Афіф
джерело

Хоча це цікаві способи зробити це, щоб добре виглядати в Chrome, лише перші ваші основні функції SVG-версії у Firefox. Зокрема, Firefox (навіть нічна версія) не підтримує conic-gradient()або repeating-conic-gradient(). Отже, це може бути життєздатним підходом у майбутньому, але це не те, що можна використати на даний момент, якщо потрібна функція крос-браузера.

— Макіен

Зважаючи на те, що код питання OP функціонує правильно у Firefox (тобто їх заявлена проблема не існує у Firefox), але є в Chrome, можливо, було б корисно вивчити відмінності між принаймні Chrome (+ клонами) та Firefox, надаючи код, який функціонує в обох випадках (або принаймні чітко вказується, що можна використовувати зараз із підтримкою крос-браузера).

— Макіен

@Makyen в той час, як код OP працює в Firefox, я намагаюся зосередити увагу на контрольній частині розриву, оскільки з базовою рамкою ми не можемо контролювати прогалини. Я також додаю частину забарвлення теж. Я намагаюся зробити це загальною відповіддю. Що стосується градієнта, так у Firefox не вистачає підтримки, але я впевнений, що вона незабаром (я все ще дивуюсь, що вони спізнюються на це, Chrome підтримує це майже два роки). Я зв’язав інше питання для більш підтримуваних способів, але це було не дуже явно. Буде оновлено.

— Темані Афіф

Використовуйте 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>

Розгорніть фрагмент

— саніот
джерело

conic-gradientз якихось причин стає

— скупим