অভিন্ন ব্যবধান সহ ড্যাশযুক্ত চেনাশোনাগুলি কীভাবে তৈরি করবেন?

Question

আমি সিএসএস দিয়ে একটি বিন্দুযুক্ত বৃত্ত তৈরি করতে চেয়েছিলাম এবং নিম্নলিখিত প্রক্রিয়াটি দিয়ে এটি তৈরি করেছি।

যদিও ড্যাশড বৃত্তটি এই প্রক্রিয়াটির দ্বারা প্রদর্শিত হতে পারে, ড্যাশড লাইনের শেষ এবং শুরুর মধ্যবর্তী ব্যবধানটি সরু হয়ে গেছে, এবং ফাঁকটি অভিন্ন ছিল না।

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

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

ফাঁকটি অভিন্ন করার কোনও উপায় আছে কি? আমরা কি ড্যাশগুলির মধ্যে ব্যবধানটি নিয়ন্ত্রণ করতে পারি?

যদি কেবল সিএসএসের মাধ্যমেই এটি সম্ভব না হয় তবে আমরা জাভাস্ক্রিপ্ট বা অনুরূপ কিছু ব্যবহার করার কথা বিবেচনা করছি।

Comments

এটির জন্য মূল্যবান, কেবলমাত্র ক্রোম (এবং ক্লোনস, আমি অনুমান করি) আপনার কোডটিতে সমস্যা রয়েছে বলে মনে হয়।

— vlvaro González

হাঁ। আমার কাছে দেখতে দুর্দান্ত

— স্ট্রবেরি

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>

জিনিসগুলি আরও নমনীয় করে তুলতে আমরা সহজেই এসভিজিটিকে ব্যাকগ্রাউন্ড হিসাবে ব্যবহার করতে পারি:

.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()। সুতরাং, ভবিষ্যতে এগুলি একটি কার্যকর পদ্ধতির হতে পারে, তবে ক্রস ব্রাউজারের কার্যকারিতা পছন্দসই হলে এই মুহুর্তে এটি ব্যবহার করা যায় এমন কিছু নয়।

— মাকেন

ফায়ারফক্সে ওপির কোডটি সঠিকভাবে কাজ করে (যেমন তাদের বর্ণিত সমস্যাটি ফায়ারফক্সে বিদ্যমান নেই) তবে ক্রোমে রয়েছে, এটি কমপক্ষে ক্রোম (+ ক্লোনস) এবং ফায়ারফক্সের মধ্যে পার্থক্যগুলি অন্বেষণ করা ভাল ধারণা হতে পারে, উভয় ক্ষেত্রে কার্যকর কোড সরবরাহ করার সময় (বা কমপক্ষে স্পষ্টভাবে বলুন যে ক্রস-ব্রাউজার সমর্থন রয়েছে এখন কী ব্যবহার করা যেতে পারে )।

— মাকেন

@ ম্যাক্যেন যখন ফায়ারফক্সে ওপি কোডটি ঠিকঠাকভাবে কাজ করে, আমি ফাঁক অংশটি নিয়ন্ত্রণের দিকে মনোনিবেশ করার চেষ্টা করছি কারণ একটি মৌলিক সীমান্তের সাথে আমরা ফাঁকগুলি নিয়ন্ত্রণ করতে পারি না। আমি এছাড়াও রঙিন অংশ যোগ করছি। আমি এটিকে সাধারণ উত্তর দেওয়ার চেষ্টা করছি। গ্রেডিয়েন্ট সম্পর্কিত, হ্যাঁ ফায়ারফক্সের সমর্থনের অভাব রয়েছে তবে আমি শীঘ্রই আসবে বলে আমি নিশ্চিত (আমি এখনও অবাক হয়েছি তারা এ নিয়ে দেরীতে রয়েছে, প্রায় দুই বছর ধরে ক্রোম এটি সমর্থন করছিল)। আমি আরও সমর্থিত উপায়ে অন্য প্রশ্নের সাথে লিঙ্ক করেছি তবে এটি খুব স্পষ্ট ছিল না। এটি আপডেট করা হবে।

— তেমনী আফিফ

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কোনও কারণে দমবন্ধ হয়ে ওঠে ...

— ২-২৮