반응형 클리핑에 shape() 사용

게시: 2025년 4월 8일

clip-path 속성을 사용하면 원, 다각형 또는 SVG 경로로 클리핑하여 요소의 도형을 변경할 수 있습니다. 하지만 Chrome 135 및 Safari 18.4 이전에는 반응형 다각형과 SVG 경로를 사용하여 반응하지 않는 더 복잡한 도형 중에서 선택해야 했습니다. 새 shape() 함수를 사용하면 clip-path가 요소를 다각형이 아닌 도형으로 클립할 수 있으며 이 도형도 반응형입니다.

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox Technology Preview: supported.
  • Safari: 18.4.

Source

국기 도형 만들기

예를 들어 clip-path: path()clip-path: shape()를 사용하여 국기 도형을 만드는 방법을 비교해 보겠습니다.

상단과 하단에 곡선이 있는 녹색 깃발 모양

깃발 도형은 상단 및 하단 테두리가 직선이나 둥근 모서리가 아닌 입방형 베지어 곡선이므로 정확히 다각형은 아닙니다.

clip-path: path()로 플래그 만들기

이 플래그와 같은 도형은 SVG 경로를 사용하여 나타낼 수 있습니다.

.flag {
  clip-path: path(
    "M 0 20 \
     C 25 0 75 40 100 20 \
     V 80 \
     C 75 100 25 60 0 80 \
     z");
}

SVG 경로는 일련의 경로 명령어입니다.

  1. 0, 20으로 이동합니다.
  2. 기준점 (25, 0 및 75, 40)을 사용하여 100, 20으로 커브를 만듭니다.
  3. 80까지의 세로선
  4. 기준점 (75, 100, 25,50)을 사용하여 0,80으로 커브를 만듭니다.
  5. 경로를 닫습니다 (0,20으로 연결된 선).

이렇게 하면 깃발 모양이 그려지지만 모든 단위는 픽셀로 표시됩니다. SVG는 이러한 픽셀을 뷰박스로 크기 조절할 수 있지만, 항상 전체 도형의 기하학적 크기 조절처럼 보이도록 합니다.

예를 들어 전체 직사각형의 크기를 조정하고 싶지만 곡선의 높이와 너비는 20픽셀로 유지하려는 경우 SVG는 이 작업을 수행할 수 없습니다.

shape()로 플래그 만들기

shape()를 사용하여 동일한 결과를 비교합니다. shape 함수는 SVG 경로 명령어와 마찬가지로 일련의 명령어를 허용합니다. 그러나 이러한 명령어는 모든 CSS 단위의 CSS 길이와 비율을 허용합니다.

다음 CSS는 백분율 단위로 플래그 a shape()를 변환합니다.

.flag {
  clip-path: shape(from 0% 20%,
     curve to 100% 20% with 25% 0% / 75% 40%,
     vline to 80%,
     curve to 0% 80% with 75% 100% / 25% 60%,
     close
  );
}

반응형으로 만들기

사용 가능한 모든 CSS 길이를 사용하여 각 좌표에 사용할 길이를 선택할 수 있습니다.

예를 들어 깃발의 전체 크기를 요소의 크기에 따라 조정하지만 곡선의 높이는 일정하게 유지하려면 다음을 실행합니다.

.flag {
  clip-path: shape(from 0% 20px,
     curve to 100% 20px with 25% 0% / 75% 40px,
     vline to calc(100% - 20px),
     curve to 0% calc(100% - 20px) 
           with 75% 100% / 25% calc(100% - 40px),
     close
  );
}

맞춤 속성 및 애니메이션 추가

이제 CSS에 도형이 정의되었으므로 맞춤 속성을 사용하여 높이를 쉽게 조작할 수도 있습니다.

.flag {
  --wave-height: 40px;
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height) 
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height))
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

@property 설명자를 사용하여 CSS 속성에 애니메이션을 적용하고 범위를 벗어나지 않도록 고정할 수도 있습니다.

@property --animated-wave-height {
  syntax: "<length>";
  inherits: false;
  initial-value: 40px;
}

@keyframes curve {
  from { --animated-wave-height: 0px; }
  to { --animated-wave-height: 180px; }
}

.flag {
  width: 600px;
  height: 400px;
  background: green;
  animation: curve 1s infinite alternate;
  --wave-height: calc(min(var(--animated-wave-height, 40px), 40%));
  clip-path: shape(
    from 0px var(--wave-height),
    curve to 100% var(--wave-height)
          with 25% 0px / 75% calc(var(--wave-height) * 2),
    vline to calc(100% - var(--wave-height)),
    curve to 0 calc(100% - var(--wave-height)) 
          with 75% 100% / 25% calc(100% - var(--wave-height) * 2),
    close
  )
}

데모 사용해 보기

Chrome 135 또는 Safari 18.4에서는 이 CodePen 데모에서 clip-path: shape()를 사용하여 만든 애니메이션이 적용된 국기 도형을 볼 수 있습니다.

요약

clip-path: shape()를 사용하면 임의의 반응형 도형을 사용하여 요소를 클립할 수 있습니다. 이전에는 원뿔형 그라데이션이나 JavaScript로 구성된 SVG와 같은 기법을 사용해야만 가능했습니다.

전체 구문은 사양을 참고하세요.

현재는 clip-path에만 작동합니다. 향후 요소의 테두리 도형을 설정하는 데 이러한 도형을 사용하여 직사각형이 아닌 더 많은 표현 방법을 사용할 수 있을 것으로 기대됩니다.