Come creare cerchi tratteggiati con spaziatura uniforme?

Volevo creare un cerchio tratteggiato con CSS e crearlo con il seguente processo.

Sebbene il cerchio tratteggiato possa essere visualizzato con questo processo, il divario tra la fine e l'inizio della linea tratteggiata si è ridotto e il divario non era uniforme.

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

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

Espandi frammento

C'è un modo per rendere uniforme il divario? possiamo anche controllare il divario tra i trattini?

Se ciò non è possibile solo con i CSS, stiamo considerando l'utilizzo di JavaScript o qualcosa di simile.

javascript html css

— Temani Afif
fonte

Per quello che vale, solo Chrome (e i cloni, immagino) sembra avere problemi con il tuo codice.

— Álvaro González

Sì. Mi sembra buono

— Strawberry

Ecco una versione ottimizzata della conic-gradient()soluzione in cui è possibile controllare facilmente il numero di trattini e lo spazio tra

Mostra snippet di codice

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

Espandi frammento

Per avere piena trasparenza, consideriamo mask

Mostra snippet di codice

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

Espandi frammento

Per rendere le cose divertenti possiamo anche considerare una colorazione più complessa ai trattini:

Mostra snippet di codice

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

Espandi frammento

Potresti sicuramente desiderare un po 'di contenuto all'interno, quindi applica meglio la maschera / sfondo su uno pseudo elemento per evitare di mascherare il contenuto:

Mostra snippet di codice

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

Espandi frammento

Domanda correlata per ottenere più idee CSS per ottenere un risultato simile: Solo grafico a torta CSS - Come aggiungere spaziatura / riempimento tra le sezioni? . Troverai più modi supportati rispetto a conic-gradient()(in realtà non funziona su Firefox) ma ti viene richiesto di usare molto codice a differenza della soluzione sopra in cui è necessario un solo elemento.

Usando SVG avrai anche bisogno di alcuni calcoli per assicurarti di avere una spaziatura 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>

Espandi frammento

Con le variabili CSS possiamo renderlo più semplice ma non è supportato in tutto il browser (in realtà non funziona in Firefox)

Mostra snippet di codice

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>

Espandi frammento

Possiamo anche usare facilmente SVG come sfondo per rendere le cose più flessibili:

Mostra snippet di codice

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

Espandi frammento

Se utilizzato come sfondo, è necessario impostare manualmente il valore in modo da avere sempre bisogno di uno sfondo diverso. Possiamo solo cambiare facilmente il colore usando SVG come maschera;

Mostra snippet di codice

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

Espandi frammento

— Temani Afif
fonte

Mentre questi sono modi interessanti per farlo che sembrano belli in Chrome, solo la tua prima versione SVG di base funziona in Firefox. In particolare, Firefox (anche la versione notturna) non supporta conic-gradient()o repeating-conic-gradient(). Quindi, questi potrebbero essere un approccio praticabile in futuro, ma non è qualcosa che può essere utilizzato al momento, se si desidera la funzionalità cross-browser.

— Makyen

Dato che la domanda del codice OP funziona correttamente in Firefox (ovvero il problema dichiarato non esiste in Firefox), ma in Chrome, probabilmente sarebbe una buona idea esplorare le differenze tra almeno Chrome (+ cloni) e Firefox, fornendo allo stesso tempo un codice funzionante in entrambi (o almeno esplicitamente indicare cosa può essere utilizzato ora con supporto cross-browser).

— Makyen

@Makyen mentre il codice OP funziona bene in Firefox, sto cercando di concentrarmi sul controllo della parte gap perché con un bordo di base non possiamo controllare le lacune. Sto anche aggiungendo la parte colorazione. Sto cercando di renderlo una risposta generica. Per quanto riguarda il gradiente, sì, Firefox non ha il supporto, ma sono abbastanza sicuro che arriverà presto (sono ancora sorpreso che siano in ritardo, Chrome lo supporta da quasi due anni). Ho collegato a un'altra domanda per modi più supportati, ma non era molto esplicito. Lo aggiornerà.

— Temani Afif

Utilizzare stroke-dasharraycon 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>

Espandi frammento

Oppure è possibile utilizzare radial-gradient(), repeating-conic-gradient()funzioni senza 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>

Espandi frammento

— sanriot
fonte

conic-gradientdiventa nervoso per qualche motivo ...

— sanriot