CSS를 사용하여 원에 세그먼트를 만들고 다양한 슬라이스 요구 사항을 처리하려면 어떻게 해야 합니까?

CSS를 사용하여 원의 세그먼트: 다양한 슬라이스 요구 사항 처리

CSS에서는 테두리 반경 해킹을 사용하여 원을 만들 수 있지만 이 기술을 확장합니다. 세그먼트를 포함하는 것은 어려운 일입니다. 그러나 JavaScript를 사용하지 않고 이를 달성하기 위해 CSS와 SCSS를 결합하는 솔루션이 있습니다.

동등한 슬라이스 생성

슬라이스에 별도의 요소가 필요하지 않고 동일한 크기의 SCSS는 원추형 기울기에 대한 정지점 목록을 생성할 수 있는 유연성을 제공합니다. 색상 팔레트가 주어지면 SCSS 기능은 원 주위에 정류장을 균등하게 배포할 수 있습니다.

<code class="scss">@function stops($c) {
  $n: length($c);
  $p: 100%/$n;
  $l: ();

  @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;
  aspect-ratio: 1;
  border-radius: 50%;
  background: conic-gradient(stops($c))
}</code>

시작 각도 제어

세그먼트가 특정 각도(12시 제외)에서 시작되도록 하려면 clock) from 키워드를 conic-gradient()에 추가할 수 있습니다.

<code class="css">background: conic-gradient(from 17deg, stops($c))</code>

콘텐츠가 풍부한 슬라이스 처리

콘텐츠가 필요하거나 필요한 세그먼트의 경우 원 밖의 애니메이션을 사용하려면 좀 더 복잡한 접근 방식이 필요합니다. 여기에는 원하는 결과를 얻기 위해 의사 요소와 CSS 애니메이션을 사용하는 것이 포함됩니다.

위 내용은 CSS를 사용하여 원에 세그먼트를 만들고 다양한 슬라이스 요구 사항을 처리하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!