JavaScript 없이 CSS를 사용하여 분할된 원을 어떻게 만들 수 있나요?

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

CSS의 경계 반경 핵을 사용하여 원을 만드는 것은 일반적인 방법이지만 어떻게 분할된 세그먼트를 달성합니까? 제공된 이미지에 묘사된 것과 같은 모습입니까? JavaScript를 제외하고 HTML과 CSS를 사용하여 이를 달성할 수 있는 방법이 있습니까?

솔루션

2024 솔루션

자세히 살펴보겠습니다. 세그먼트가 요소여야 하는지 여부와 크기가 동일한지에 따라 다른 경우:

1. 슬라이스는 요소일 필요가 없으며 동일합니다

이 경우 색상 팔레트를 활용하고 SCSS를 사용하여 슬라이스를 균등하게 분배하는 원추형 그라데이션()을 생성할 수 있습니다. 예를 들어, Coolors.co의 팔레트를 사용하여 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>

이 함수는 동일한 슬라이스에 대한 중지 목록을 생성합니다. 그런 다음 이를 conic-gradient() 내에서 사용할 수 있습니다.

<code class="css">.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))
}</code>

이 접근 방식을 사용하면 별도의 요소 없이 동일한 세그먼트를 만들 수 있습니다. conic-gradient()의 시작 각도를 조정하는 것도 가능해집니다.

2. 기타 사례

다음과 같은 추가 사례를 탐색할 수 있습니다.

• 슬라이스는 요소일 필요는 없지만 동일하지 않습니다.
• 슬라이스에는 요소가 필요하지 않습니다. 콘텐츠/ 애니메이션을 적용하려면 동일함
• 슬라이스에는 콘텐츠가 필요하며/ 애니메이션을 적용하려면 동일하지 않습니다.

각 этих 사례에는 그 이상의 독특한 접근 방식과 기술이 필요합니다. 원래 쿼리의 범위.

위 내용은 JavaScript 없이 CSS를 사용하여 분할된 원을 어떻게 만들 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!