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

Noam Rosenthal

게시일: 2025년 4월 8일

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

Browser Support

  • Chrome: 135.
  • Edge: 135.
  • Firefox: 148.
  • Safari: 18.4.

Source

플래그 모양 만들기

예를 들어 clip-path: path() 및 clip-path: shape()을 사용하여 깃발 모양을 만드는 것을 비교해 보세요.

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

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

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는 이러한 픽셀을 뷰박스로 확장할 수 있지만 항상 전체 도형의 기하학적 스케일처럼 보이도록 확장합니다.

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

shape()로 플래그 만들기

shape()를 사용하여 동일한 결과를 비교합니다. 모양 함수는 SVG 경로 명령어와 유사한 일련의 명령어를 허용합니다. 하지만 이러한 명령어는 CSS 단위로 CSS 길이와 백분율을 허용합니다.

다음 CSS는 플래그를 백분율 단위가 있는 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에만 적용됩니다. 향후에는 이러한 모양을 사용하여 요소 테두리의 모양을 설정할 수 있을 것으로 예상되며, 이를 통해 직사각형이 아닌 다양한 표현 방식을 사용할 수 있습니다.