균일 한 간격으로 점선 원을 만드는 방법은 무엇입니까?

CSS로 점선을 만들고 싶었고 다음 프로세스로 만들었습니다.

이 프로세스에 의해 점선 원이 표시 될 수 있지만, 점선의 끝과 시작 사이의 간격이 좁아지고 간격이 균일하지 않았다.

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

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

스 니펫 확장

간격을 균일하게 만드는 방법이 있습니까? 대시 사이의 간격을 제어 할 수 있습니까?

CSS만으로는 가능하지 않은 경우 JavaScript 또는 이와 유사한 것을 사용하는 것을 고려하고 있습니다.

javascript html css

— 테마 니 Afif
소스

가치있는 것은 Chrome (및 복제본 만)에 코드에 문제가있는 것 같습니다.

— Álvaro Gonzá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>

스 니펫 확장

— 테마 니 Afif
소스

이것들은 Chrome에서 잘 보이게하는 흥미로운 방법이지만 Firefox의 첫 번째 기본 SVG 버전 기능입니다. 특히 Firefox (야간 버전도)는 conic-gradient()또는을 지원하지 않습니다 repeating-conic-gradient(). 따라서이 방법은 향후 실행 가능한 방법 일 수 있지만, 브라우저 간 기능이 필요한 경우 현재 사용할 수있는 방법이 아닙니다.

— Makyen

OP 코드가 Firefox에서 올바르게 작동한다는 것 (즉, 명시된 문제는 Firefox에는 존재하지 않음)이지만 Chrome에서는 문제가된다면 최소한 Chrome (+ 클론)과 Firefox의 차이점을 살펴 보는 것이 좋습니다. 두 기능 모두에서 작동하는 코드를 제공하면서 (또는 브라우저 간 지원이 가능한 지금 사용할 수있는 것을 명시 적으로 명시해야 함 ).

— Makyen

@Makyen은 Firefox에서 OP 코드가 잘 작동하는 동안 기본 경계를 사용하여 간격을 제어 할 수 없기 때문에 간격 부분을 제어 하는 데 집중하려고합니다 . 나는 또한 착색 부분을 추가하고 있습니다. 나는 일반적인 대답을하려고합니다. 그라디언트와 관련하여 예, Firefox에는 지원이 부족하지만 곧 출시 될 것이라고 확신합니다 (아직도 늦어 Chrome이 거의 2 년 동안 지원하고 있음). 더 많은 지원되는 방법에 대한 다른 질문에 연결했지만 그다지 명시 적이지는 않았습니다. 업데이트합니다.

— Temani Afif

stroke-dasharraySVG와 함께 사용하십시오 .

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>

스 니펫 확장

또는 Firefox없이 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>

스 니펫 확장

— Sanriot
소스

conic-gradient어떤 이유로 든

— 재규어