## JavaScript 없이 CSS에서 원형 차트 세그먼트를 만들 수 있나요?

CSS를 사용하여 원의 세그먼트

테두리 반경을 사용하여 CSS에서 원을 만드는 것이 일반적인 방법입니다. 그러나 원형 차트와 유사한 세그먼트를 사용하여 유사한 효과를 얻을 수 있습니까? 이 기사에서는 JavaScript 사용을 제외하고 HTML과 CSS만 사용하여 이를 달성하는 방법을 자세히 설명합니다.

동일한 크기의 세그먼트 생성

동일한 크기의 세그먼트에 대한 한 가지 접근 방식은 다음에 대한 중지 목록을 생성하는 것입니다. SCSS를 사용하는 원뿔형 그라데이션(). 제공된 색상($c)을 기반으로 이러한 정지점을 생성하기 위해 사용자 정의 SCSS 함수 정지($c)를 생성하여 동일한 간격을 보장할 수 있습니다. 이 기능은 슬라이스 수를 고려하고 슬라이스 각도를 백분율로 계산하며 적절한 백분율로 정지점 목록을 생성합니다.

예를 들어 Coolors의 색상 팔레트를 사용하면 정지점을 사용할 수 있습니다. () 함수는 conic-gradient() 선언 내에서 사용됩니다.

<code class="css">.pie {
  width: 20em; /* Desired pie diameter */
  aspect-ratio: 1; /* Square element */
  border-radius: 50%; /* Turn square into disc */
  background: conic-gradient(stops($c));
}</code>

이 접근 방식을 사용하면 conic-gradient()에서 다른 각도를 지정하여 슬라이스 각도를 사용자 정의할 수 있습니다.

위 내용은 ## JavaScript 없이 CSS에서 원형 차트 세그먼트를 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!