एक समान रिक्ति के साथ धराशायी सर्कल कैसे बनाएं?

Question

मैं सीएसएस के साथ एक बिंदीदार सर्कल बनाना चाहता था और इसे निम्नलिखित प्रक्रिया के साथ बनाया।

हालाँकि इस प्रक्रिया द्वारा धराशायी वृत्त को प्रदर्शित किया जा सकता है, लेकिन धराशायी रेखा के अंत और शुरुआत के बीच का अंतर संकीर्ण हो गया है, और अंतर समान नहीं था।

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

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

क्या गैप को एक समान बनाने का एक तरीका है? क्या हम डैश के बीच के अंतर को भी नियंत्रित कर सकते हैं?

यदि अकेले सीएसएस के साथ यह संभव नहीं है, तो हम जावास्क्रिप्ट या कुछ इसी तरह का उपयोग करने पर विचार कर रहे हैं।

Comments

इसके लायक क्या है, केवल क्रोम (और क्लोन, मुझे लगता है) आपके कोड के साथ समस्याएँ हैं।

— अल्वारो गोंजालेज

हां। मुझे अच्छा लगता है

— स्ट्रॉबेरी

Answer 1

यहां 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>

---

संबंधित प्रश्न एक समान परिणाम प्राप्त करने के लिए अधिक सीएसएस विचार प्राप्त करने के लिए: सीएसएस ओनली पाई चार्ट - स्लाइस के बीच रिक्ति / पैडिंग कैसे जोड़ें? । आप conic-gradient()वास्तव में (फ़ायरफ़ॉक्स पर काम नहीं करता है) की तुलना में अधिक समर्थित तरीके पाएंगे लेकिन आपको उपरोक्त समाधान के विपरीत बहुत सारे कोड का उपयोग करना होगा जहां केवल एक तत्व की आवश्यकता है।

---

एसवीजी का उपयोग करके आपको यह सुनिश्चित करने के लिए कुछ गणना की आवश्यकता होगी कि आपके पास एक समान रिक्ति है:

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>

सीएसएस चर के साथ हम इसे आसान बना सकते हैं लेकिन यह सभी ब्राउज़र में समर्थित नहीं है (वास्तव में यह फ़ायरफ़ॉक्स में काम नहीं करता है)

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>

जब पृष्ठभूमि के रूप में उपयोग किया जाता है, तो आपको मैन्युअल रूप से मान सेट करने की आवश्यकता होती है ताकि आपको हर बार एक अलग पृष्ठभूमि की आवश्यकता हो। हम केवल एसवीजी को मास्क के रूप में उपयोग करके रंग को बदलना आसान बना सकते हैं;

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

Comments

जबकि ये दिलचस्प तरीके हैं कि यह क्रोम क्रोम में अच्छा दिखता है, फ़ायरफ़ॉक्स में केवल आपका पहला, मूल एसवीजी संस्करण कार्य करता है। विशेष रूप से, फ़ायरफ़ॉक्स (रात का संस्करण भी) समर्थन नहीं करता है conic-gradient()या repeating-conic-gradient()। तो, ये भविष्य में एक व्यवहार्य दृष्टिकोण हो सकता है, लेकिन यह ऐसा कुछ नहीं है जिसका उपयोग फिलहाल किया जा सकता है, यदि क्रॉस-ब्राउज़र कार्यक्षमता वांछित है।

— मकेन

यह देखते हुए कि प्रश्न का कोड फ़ायरफ़ॉक्स में ठीक से काम करता है (अर्थात उनकी बताई गई समस्या फ़ायरफ़ॉक्स में मौजूद नहीं है), लेकिन क्रोम में, कम से कम क्रोम (+ क्लोन) और फ़ायरफ़ॉक्स के बीच अंतर का पता लगाने के लिए यह एक अच्छा विचार होगा, जबकि कोड है कि दोनों में कार्यात्मक है (या कम से कम स्पष्ट रूप से यह क्या किया जा सकता है प्रदान अब पार ब्राउज़र समर्थन है)।

— मकेन

@Makyen जबकि ओपी कोड फ़ायरफ़ॉक्स में ठीक काम करता है, मैं कंट्रोल गैप वाले हिस्से पर ध्यान केंद्रित करने की कोशिश कर रहा हूं क्योंकि एक बुनियादी सीमा के साथ हम अंतराल को नियंत्रित नहीं कर सकते। मैं रंगांकन भाग भी जोड़ रहा हूं। मैं इसका एक सामान्य उत्तर देने की कोशिश कर रहा हूं। ढाल के बारे में, हाँ फ़ायरफ़ॉक्स के पास समर्थन की कमी है, लेकिन मुझे पूरा यकीन है कि यह जल्द ही आएगा (मुझे अभी भी आश्चर्य है कि वे इस पर देर से हैं, क्रोम लगभग दो साल से यह समर्थन कर रहा था)। मैं अधिक समर्थित तरीकों के लिए एक और प्रश्न से जुड़ा था लेकिन यह बहुत स्पष्ट नहीं था। इसे अपडेट करेंगे।

— तैमनी आफिफ

Answer 2

stroke-dasharrayएसवीजी के साथ प्रयोग करें ।

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()फ़ायरफ़ॉक्स के बिना काम करता है।

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

Comments

conic-gradientकिसी कारण से

— पागल