게시: 2025년 4월 8일
clip-path
속성을 사용하면 원, 다각형 또는 SVG 경로로 클리핑하여 요소의 도형을 변경할 수 있습니다. 하지만 Chrome 135 및 Safari 18.4 이전에는 반응형 다각형과 SVG 경로를 사용하여 반응하지 않는 더 복잡한 도형 중에서 선택해야 했습니다.
새 shape()
함수를 사용하면 clip-path
가 요소를 다각형이 아닌 도형으로 클립할 수 있으며 이 도형도 반응형입니다.
국기 도형 만들기
예를 들어 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 경로는 일련의 경로 명령어입니다.
- 0, 20으로 이동합니다.
- 기준점 (25, 0 및 75, 40)을 사용하여 100, 20으로 커브를 만듭니다.
- 80까지의 세로선
- 기준점 (75, 100, 25,50)을 사용하여 0,80으로 커브를 만듭니다.
- 경로를 닫습니다 (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
에만 작동합니다. 향후 요소의 테두리 도형을 설정하는 데 이러한 도형을 사용하여 직사각형이 아닌 더 많은 표현 방법을 사용할 수 있을 것으로 기대됩니다.