JavaScript 없이 CSS를 사용하여 원을 동일하거나 다양한 크기로 분할하려면 어떻게 해야 합니까?

CSS로 원 분할

CSS에서는 border-radius 속성을 사용하여 원형 모양을 만드는 것이 가능합니다. 그러나 이러한 서클에 세그먼트를 추가하려면 추가 탐색이 필요합니다. JavaScript 없이 이를 달성할 수 있는 방법을 살펴보겠습니다.

동일한 크기의 세그먼트

세그먼트에 HTML 요소가 필요하지 않고 동일한 크기인 경우 다음을 수행할 수 있습니다. SCSS를 활용하여 원추형 그라데이션()에 대한 정류장 목록을 생성합니다. 정지점을 균등하게 분배하기 위해 사용자 정의 SCSS 기능을 생성할 수 있습니다.

<code class="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) 
            if($i > 1, 0%, unquote(''))
            if($i < $n, round($i*$p), unquote(''))
    }
    
    @return $l
}</code>

이 기능을 사용하면 원추형 그라데이션() 내에서 세그먼트의 색상과 각도를 정의할 수 있습니다.

<code class="css">.pie {
    width: 20em; /* desired pie diameter */
    aspect-ratio: 1; /* square element */
    border-radius: 50%; /* disc shape */
    background: conic-gradient(stops(#f94144, #f3722c, #f8961e, #f9c74f, 
        #90be6d, #43aa8b, #577590))
}</code>

이렇게 하면 동일한 크기의 세그먼트가 원주 주위에 고르게 분포된 원이 만들어집니다.

크기가 다양한 세그먼트

세그먼트에 다양한 크기가 필요한 경우, 우리는 여전히 비슷한 전략을 활용할 수 있습니다. stop() 함수를 수정하여 각 세그먼트의 시작 및 끝 각도를 정의하는 추가 매개변수를 사용할 수 있습니다. 그런 다음 그라데이션 정의 내에서 각 색상 정지점에 대한 각도를 지정할 수 있습니다.

또한 세그먼트에 콘텐츠나 애니메이션이 포함되어야 하는 경우 HTML 요소를 사용하고 CSS 변환을 사용하여 원 내에 배치할 수 있습니다. 크기와 각도를 세심하게 조정하면 겹쳐 보이는 부분을 만들어 복잡한 디자인을 만들 수 있습니다.

위 내용은 JavaScript 없이 CSS를 사용하여 원을 동일하거나 다양한 크기로 분할하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!