วิธีสร้างวงกลมที่มีระยะห่างสม่ำเสมอ?

ฉันต้องการสร้างวงกลมจุดด้วย CSS และสร้างด้วยกระบวนการต่อไปนี้

แม้ว่ากระบวนการนี้จะแสดงวงกลมประ แต่ช่องว่างระหว่างจุดสิ้นสุดและจุดเริ่มต้นของเส้นประนั้นแคบลงและช่องว่างไม่สม่ำเสมอ

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

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

ขยายตัวอย่างข้อมูล

มีวิธีทำชุดช่องว่างหรือไม่? เราสามารถควบคุมช่องว่างระหว่างเส้นประหรือไม่

หากไม่สามารถทำได้ด้วย CSS เพียงอย่างเดียวเรากำลังพิจารณาใช้ JavaScript หรือสิ่งที่คล้ายกัน

javascript html css

— Temani Afif
แหล่งที่มา

สำหรับสิ่งที่คุ้มค่ามีเพียง Chrome (และโคลนฉันเดา) ดูเหมือนว่าจะมีปัญหากับรหัสของคุณ

— ÁlvaroGonzález

อ๋อ ดูดีสำหรับฉัน

— สตรอเบอร์รี่

นี่คือ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>

ขยายตัวอย่างข้อมูล

คำถามที่เกี่ยวข้องเพื่อรับแนวคิด CSS เพิ่มเติมเพื่อให้ได้ผลลัพธ์ที่คล้ายกัน: CSS Only Pie Chart - วิธีเพิ่มระยะห่าง / การเว้นระยะห่างระหว่างส่วนต่างๆ . คุณจะพบวิธีที่ได้รับการสนับสนุนมากกว่าconic-gradient()(อันที่จริงแล้วมันไม่ทำงานบน Firefox) แต่คุณต้องใช้รหัสจำนวนมากซึ่งแตกต่างจากวิธีการแก้ปัญหาข้างต้นที่ต้องการเพียงองค์ประกอบเดียวเท่านั้น

การใช้ SVG คุณจะต้องมีการคำนวณเพื่อให้แน่ใจว่าคุณมีระยะห่างที่เท่ากัน:

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>

ขยายตัวอย่างข้อมูล

ด้วยตัวแปร CSS เราสามารถทำให้ง่ายขึ้น แต่ไม่ได้รับการสนับสนุนในเบราว์เซอร์ทั้งหมด (จริงๆแล้วมันไม่ทำงานใน Firefox)

แสดงตัวอย่างรหัส

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>

ขยายตัวอย่างข้อมูล

เมื่อใช้เป็นพื้นหลังคุณต้องตั้งค่าด้วยตนเองดังนั้นคุณจะต้องมีพื้นหลังที่แตกต่างกันในแต่ละครั้ง เราสามารถทำให้เปลี่ยนสีได้ง่ายโดยใช้ SVG เป็นหน้ากาก

แสดงตัวอย่างรหัส

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

ขยายตัวอย่างข้อมูล

— Temani Afif
แหล่งที่มา

ในขณะที่วิธีการเหล่านี้น่าสนใจในการทำสิ่งนี้ให้ดูดีใน Chrome เฉพาะรุ่น SVG พื้นฐานรุ่นแรกของคุณใน Firefox สะดุดตา, Firefox (แม้รุ่นต่อคืน) ไม่สนับสนุนหรือconic-gradient() repeating-conic-gradient()ดังนั้นสิ่งเหล่านี้อาจเป็นแนวทางที่มีศักยภาพในอนาคต แต่ก็ไม่ใช่สิ่งที่สามารถใช้งานได้ในขณะนี้หากต้องการฟังก์ชั่นข้ามเบราว์เซอร์

— Makyen

เนื่องจากว่าคำถามของรหัส OP ทำงานได้อย่างถูกต้องใน Firefox (เช่นปัญหาที่ระบุไว้ไม่มีอยู่ใน Firefox) แต่ใน Chrome มันอาจเป็นความคิดที่ดีที่จะสำรวจความแตกต่างระหว่างอย่างน้อย Chrome (+ clones) และ Firefox ในขณะที่ให้รหัสที่ใช้งานได้ทั้งสองอย่าง (หรืออย่างน้อยก็ระบุอย่างชัดเจนว่าสามารถใช้อะไรได้บ้างในขณะนี้ที่มีการสนับสนุนข้ามเบราว์เซอร์)

— Makyen

@Makyen ในขณะที่รหัส OP ทำงานได้ดีใน Firefox ฉันพยายามที่จะมุ่งเน้นไปที่การควบคุมส่วนช่องว่างเพราะมีเส้นขอบพื้นฐานที่เราไม่สามารถควบคุมช่องว่างได้ ฉันยังเพิ่มส่วนสีด้วย ฉันพยายามทำให้เป็นคำตอบทั่วไป เกี่ยวกับการไล่ระดับสีใช่ Firefox ขาดการสนับสนุน แต่ฉันค่อนข้างแน่ใจว่ามันจะมาเร็ว ๆ นี้ (ฉันยังคงประหลาดใจที่พวกเขามาสายนี้ Chrome ได้สนับสนุนสิ่งนี้มาเกือบสองปี) ฉันเชื่อมโยงกับคำถามอื่นเพื่อรับการสนับสนุนเพิ่มเติม แต่ก็ไม่ชัดเจนมาก จะทำการอัพเดท

— Temani Afif

ใช้stroke-dasharrayกับ 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>

ขยายตัวอย่างข้อมูล

หรือคุณสามารถใช้radial-gradient(), repeating-conic-gradient()ฟังก์ชั่นโดยไม่ต้อง 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>

ขยายตัวอย่างข้อมูล

— sanriot
แหล่งที่มา

conic-gradientกลายเป็น

— ขรุขระ