## CSS만 사용하여 원을 세그먼트로 나눌 수 있나요?-CSS 튜토리얼-php.cn

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

Barbara Streisand

풀어 주다： 2024-10-25 02:25:02

원래의

744명이 탐색했습니다.

## Can You Slice a Circle into Segments Using Only 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 중국어 웹사이트의 기타 관련 기사를 참조하세요!