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

16

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
4
Pelo que vale, apenas o Chrome (e os clones, eu acho) parece ter problemas com o seu código.
Álvaro González
3
Sim. Parece bom para mim
Strawberry

Respostas:

14

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

Para ter total transparência, consideramos mask

Mostrar snippet de código

Círculo tracejado CSS com espaço uniforme

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

Mostrar snippet de código

Traços CSS transparentes com gradiente cônico e máscara

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

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

Traços de espaço uniforme SVG

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

Mostrar snippet de código

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

Borda tracejada SVG com espaço uniforme

Temani Afif
fonte
11
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
11
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
3

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
3
conic-gradienttorna-se irregular por algum motivo ...
sanriot 08/03