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

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

동일 크기 세그먼트 생성

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

예를 들어 Coolors의 색상 팔레트를 사용하면 정지점을 사용할 수 있습니다. () 원추형 그라데이션() 선언 내의 함수:

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

이 접근 방식을 사용하면 원추형 그라데이션()에서 다른 각도를 지정하여 사용자 정의 가능한 슬라이스 각도가 가능합니다.