Como criar círculos tracejados com espaçamento uniforme?

Eu queria fazer um círculo pontilhado com CSS e o criei com o seguinte processo.

Embora o círculo tracejado possa ser exibido por esse processo, o espaço entre o final e o início da linha tracejada tornou-se estreito e o espaço não era uniforme.

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

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

Expandir snippet

Existe uma maneira de uniformizar a lacuna? também podemos controlar o espaço entre os traços?

Se isso não for possível apenas com CSS, estamos pensando em usar JavaScript ou algo semelhante.

javascript html css

— Temani Afif
fonte

Pelo que vale, apenas o Chrome (e os clones, eu acho) parece ter problemas com o seu código.

— Álvaro González

Sim. Parece bom para mim

— Strawberry

Aqui está uma versão otimizada da conic-gradient()solução, na qual você pode controlar facilmente o número de traços e o espaço entre

Mostrar snippet de código

.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>

Expandir snippet

Para ter total transparência, consideramos mask

Mostrar snippet de código

.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>

Expandir snippet

Para tornar as coisas engraçadas , podemos até considerar uma coloração mais complexa dos traços:

Mostrar snippet de código

.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>

Expandir snippet

Você pode, com certeza, querer algum conteúdo interno, para aplicar melhor a máscara / plano de fundo em um pseudo elemento para evitar mascarar o conteúdo:

Mostrar snippet de código

.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>

Expandir snippet

Pergunta relacionada para obter mais idéias de CSS e obter um resultado semelhante: Gráfico de pizza somente em CSS - Como adicionar espaçamento / preenchimento entre as fatias? . Você encontrará maneiras mais suportadas do que conic-gradient()(na verdade, ele não funciona no Firefox), mas é necessário que você use muito código, ao contrário da solução acima, onde apenas um elemento é necessário.

Usando o SVG, você também precisará de alguns cálculos para garantir um espaçamento uniforme:

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>

Expandir snippet

Com variáveis CSS, podemos facilitar, mas não é suportado em todo o navegador (na verdade, não funciona no Firefox)

Mostrar snippet de código

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>

Expandir snippet

Também podemos usar facilmente o SVG como plano de fundo para tornar as coisas mais flexíveis:

Mostrar snippet de código

.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>

Expandir snippet

Quando usado como plano de fundo, você precisa definir manualmente o valor para precisar de um plano de fundo diferente a cada vez. Só podemos facilitar a mudança de cor usando o SVG como máscara;

Mostrar snippet de código

.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>

Expandir snippet

— Temani Afif
fonte

Embora essas sejam maneiras interessantes de fazer isso parecerem boas no Chrome, apenas sua primeira versão básica do SVG funciona no Firefox. Notavelmente, o Firefox (mesmo a versão Nightly) não suporta conic-gradient()ou repeating-conic-gradient(). Portanto, essa pode ser uma abordagem viável no futuro, mas não é algo que possa ser usado no momento, se a funcionalidade entre navegadores for desejada.

— Makyen 8/03

Como o código do OP da pergunta funciona corretamente no Firefox (ou seja, o problema declarado não existe no Firefox), mas no Chrome, provavelmente seria uma boa ideia explorar as diferenças entre pelo menos o Chrome (+ clones) e o Firefox, enquanto fornece código funcional em ambos (ou pelo menos declara explicitamente o que pode ser usado agora com suporte para vários navegadores).

— Makyen 8/03

@ Makyen enquanto o código OP funciona bem no Firefox, estou tentando focar no controle da parte da lacuna, porque com uma borda básica não podemos controlar as lacunas. Também estou adicionando a parte da coloração. Estou tentando torná-lo uma resposta genérica. No que diz respeito ao gradiente, sim, o Firefox não tem suporte, mas tenho certeza de que ele virá em breve (ainda estou surpreso por eles estarem atrasados nisso, o Chrome está apoiando isso há quase dois anos). Vinculei a outra pergunta de maneiras mais suportadas, mas não era muito explícito. Irá atualizá-lo.

— Temani Afif

Use stroke-dasharraycom 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>

Expandir snippet

Ou você pode usar radial-gradient(), repeating-conic-gradient()funções sem 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>

Expandir snippet

— Sanriot
fonte

conic-gradienttorna-se irregular por algum motivo ...

— sanriot 08/03