## CSS만 사용하여 원을 세그먼트로 나눌 수 있나요?

CSS를 사용한 원의 세그먼트: 기술 탐색

테두리 반경 속성을 사용하여 CSS에서 원을 만드는 것은 잘 알려진 방법입니다. 기술. 그런데 제공된 이미지처럼 원을 분할하는 것이 가능한가요? 이것이 JavaScript에 의존하지 않고 HTML과 CSS를 통해서만 달성할 수 있는지 의문이 듭니다.

2024년 솔루션

이 문제를 자세히 알아보기 위해 다음과 같이 분류하겠습니다. 다양한 시나리오:

• 요소가 없는 동일한 슬라이스
• 요소가 없는 동일 슬라이스
• 콘텐츠 또는 애니메이션이 필요한 동일 슬라이스
• 동등한 슬라이스 콘텐츠 또는 애니메이션 필요

요소가 아닌 동일한 조각

색상 팔레트를 활용하여 SCSS는 원추형 그라데이션()에 대한 중지 목록을 생성하여 생성할 수 있습니다. 균일한 조각. 예를 들어 다음 팔레트를 고려해보세요.

$c: #f94144, #f3722c, #f8961e, #f9c74f, #90be6d, #43aa8b, #577590;

균등한 간격의 슬라이스를 생성하는 SCSS 함수를 정의합니다.

@function stops($c) {
    $n: length($c); // number of slices
    $p: 100%/$n; // slice angle as a % of circle
    $l: (); // list of stops, initially empty
    
    @for $i from 1 through $n {
        $l: $l, nth($c, $i) 0% $i*$p
    }
    
    @return $l
}

이 접근 방식은 다음과 같은 정류장 목록을 생성합니다.

#f94144 0% 14.2857142857%, #f3722c 0% 28.5714285714%,
#f8961e 0% 42.8571428571%, #f9c74f 0% 57.1428571429%,
#90be6d 0% 71.4285714286%, #43aa8b 0% 85.7142857143%,
#577590 0% 100%

그러나 이 출력에는 불필요한 소수점과 명시적인 기본 중지가 포함되어 있습니다. 따라서 개선된 기능은 다음과 같습니다.

@function stops($c) {
    $n: length($c); // number of slices
    $p: 100%/$n; // slice angle as a % of circle
    $l: (); // list of stops, initially empty
    
    @for $i from 1 through $n {
        $l: $l, nth($c, $i)
            if($i > 1, 0%, unquote(''))
            if($i < $n, round($i*$p), unquote(''))
    }
    
    @return $l
}

결과는 다음과 같습니다.

#f94144 14%, #f3722c 0% 29%, #f8961e 0% 43%, #f9c74f 0% 57%,
#90be6d 0% 71%, #43aa8b 0% 86%, #577590 0%

이 기능은 보다 직관적인 정지점을 생성합니다.

이를 원뿔형에서 활용하려면 -gradient()를 사용하여 다음 클래스를 정의합니다.

.pie {
    width: 20em; /* set width to desired pie diameter */
    aspect-ratio: 1; /* make the element square */
    border-radius: 50%; /* turn square into disc */
    /* equally-sized slices */
    background: conic-gradient(stops($c))
}

4개의 CSS 선언만으로 동일한 조각으로 분할된 원을 만들 수 있습니다. 슬라이스를 회전하려면 원추형 그라데이션()에 대해 다른 시작 각도를 지정하기만 하면 됩니다.

background: conic-gradient(from 17deg, stops($c))

라이브 데모:

<code class="html"><div class="pie"></div>

<code class="css">.pie {
  width: 16em; /* set width to desired pie diameter */
  aspect-ratio: 1; /* make pie element square */
  border-radius: 50%; /* turn square into disc */
  /* equally sized slices */
  background: 
    conic-gradient(from 17deg, #f94144 14%, #f3722c 0% 29%, #f8961e 0% 43%, 
        #f9c74f 0% 57%, #90be6d 0% 71%, #43aa8b 0% 86%, #577590 0%)
}</code>

위 내용은 ## CSS만 사용하여 원을 세그먼트로 나눌 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!