Düzgün aralıklı kesikli daireler nasıl oluşturulur?

CSS ile noktalı bir daire yapmak istedim ve aşağıdaki işlemle oluşturdum.

Kesikli daire bu işlemle görüntülenebilse de, kesikli çizginin sonu ile başlangıcı arasındaki boşluk daraldı ve boşluk eşit değildi.

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

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

Snippet'i genişlet

Boşluğu üniform hale getirmenin bir yolu var mı? çizgiler arasındaki boşluğu da kontrol edebilir miyiz?

Bu yalnızca CSS ile mümkün değilse, JavaScript veya benzeri bir şey kullanmayı düşünüyoruz.

javascript html css

— Temani Afif
kaynak

Değeri için, sadece Chrome (ve klonlar, sanırım) kodunuzla ilgili sorunlar var gibi görünüyor.

— Álvaro González

Evet. Bana iyi görünüyor

— Çilek

Burada, conic-gradient()çizgi sayısını ve aralarındaki boşluğu kolayca kontrol edebileceğiniz çözümün optimize edilmiş bir versiyonu

Kod snippet'ini göster

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

Snippet'i genişlet

Tam şeffaflığa sahip olmak için mask

Kod snippet'ini göster

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

Snippet'i genişlet

İşleri eğlenceli hale getirmek için çizgi için daha karmaşık bir renklendirme bile düşünebiliriz:

Kod snippet'ini göster

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

Snippet'i genişlet

İçeriden bazı içeriklerin olmasını istediğinizden emin olabilirsiniz, bu nedenle içeriği maskelemek için maskeyi / arka planı sahte bir öğeye daha iyi uygulayın:

Kod snippet'ini göster

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

Snippet'i genişlet

İlgili soru benzer bir sonuç elde etmek için daha fazla CSS fikirleri almak için: Sadece CSS Pasta Grafik - dilimleri arasında boşluk / dolgu nasıl eklenir? . Daha fazla desteklenen yollar bulacaksınız conic-gradient()(aslında Firefox'ta işe yaramaz), ancak yalnızca bir öğenin gerekli olduğu yukarıdaki çözümün aksine çok fazla kod kullanmanız gerekir.

SVG'yi kullanarak, aynı aralıkta olduğunuzdan emin olmak için bazı hesaplamalara ihtiyacınız olacaktır:

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>

Snippet'i genişlet

CSS değişkenleri ile bunu kolaylaştırabiliriz ancak tüm tarayıcılarda desteklenmez (aslında Firefox'ta çalışmaz)

Kod snippet'ini göster

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>

Snippet'i genişlet

İşleri daha esnek hale getirmek için SVG'yi arka plan olarak da kolayca kullanabiliriz:

Kod snippet'ini göster

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

Snippet'i genişlet

Arka plan olarak kullanıldığında, değeri her seferinde farklı bir arka plana ihtiyacınız olacak şekilde manuel olarak ayarlamanız gerekir. SVG'yi maske olarak kullanarak rengi kolayca değiştirebiliriz;

Kod snippet'ini göster

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

Snippet'i genişlet

— Temani Afif
kaynak

Bunlar Chrome'da iyi görünmek için ilginç yollar olsa da, Firefox'ta yalnızca ilk temel SVG sürüm işlevleriniz. Özellikle, Firefox (Nightly sürümü bile) conic-gradient()veya repeating-conic-gradient(). Dolayısıyla, bunlar gelecekte uygulanabilir bir yaklaşım olabilir, ancak çapraz tarayıcı işlevselliği isteniyorsa, şu anda kullanılabilecek bir şey değildir.

— Makyen

OP sorusunun Firefox'ta (yani belirtilen sorunlarının Firefox'ta mevcut olmadığı), ancak Chrome'da doğru çalıştığı göz önüne alındığında, muhtemelen en azından Chrome (+ klonları) ve Firefox arasındaki farkları keşfetmek iyi bir fikir olacaktır, (ya da en azından açıkça kullanılabilir neler devlet hem de işlevsel olduğunu kodunu sağlarken şimdi çapraz tarayıcı desteği olmadığını).

— Makyen

@Makyen, Firefox'ta OP kodu iyi çalışırken , boşluk kısmını kontrol etmeye odaklanmaya çalışıyorum çünkü temel bir sınırla boşlukları kontrol edemiyoruz. Ayrıca renklendirme kısmını da ekliyorum. Genel bir cevap vermeye çalışıyorum. Gradyan ile ilgili olarak, evet Firefox destek eksikliği ama yakında geleceğinden eminim (hala geç kaldıklarına şaşırıyorum, Chrome bunu neredeyse iki yıldan beri destekliyordu). Daha desteklenen yollar için başka bir soruya bağlandım, ancak çok açık değildi. Güncelleyecek.

— Temani Afif

stroke-dasharraySVG ile kullanın .

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>

Snippet'i genişlet

Yoksa kullanabilirsiniz radial-gradient(), repeating-conic-gradient()Firefox olmadan işlevlerini.

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

Snippet'i genişlet

— sanriot
kaynak

conic-gradientnedense

— serseri