사용법
- 위쪽 도형 목록에서 원하는 모양(삼각형·육각형·별·말풍선 등)을 클릭합니다.
- 가운데 미리보기 박스에 그 도형이 곧바로 적용돼 실제로 어떻게 잘리는지 확인합니다.
- 아래 코드 박스의
clip-path값을 "CSS 복사"로 가져가, 원하는 요소(div·이미지)의 스타일에 붙여넣습니다.
활용 팁
- 반응형은 % 좌표로: 이 도구는 좌표를 퍼센트(%)로 만듭니다. 그래서 요소 크기가 달라져도 비율에 맞춰 잘려 모양이 유지됩니다. 픽셀 고정값으로 바꾸면 화면 크기에 따라 도형이 어긋날 수 있으니, 반응형에서는 % 그대로 두는 것이 안전합니다.
- 그림자는 drop-shadow로: clip-path로 자른 도형에는 box-shadow가 사각형 박스째 잘려 보이지 않습니다. 잘린 모양을 따라가는 그림자가 필요하면 부모 요소에
filter: drop-shadow(0 6px 12px rgba(0,0,0,.25))를 주세요. - 브라우저 호환: polygon·circle·ellipse 기반 clip-path는 최신 크롬·엣지·사파리·파이어폭스에서 잘 동작합니다. 아주 구형 브라우저 대응이 필요하면
-webkit-clip-path를 함께 적어주면 안전합니다.
자주 묻는 질문
Q. clip-path가 뭔가요?
clip-path는 요소의 보이는 영역을 다각형·원·타원 같은 도형으로 잘라내는 CSS 속성입니다. 예를 들어 polygon(50% 0, 100% 100%, 0 100%)을 주면 사각형 요소가 삼각형 모양으로만 보입니다. 잘린 바깥 부분은 화면에 그려지지 않고 클릭도 통과시키므로, 별도 이미지 없이 도형 모양 배경·버튼·카드를 만들 수 있습니다.
Q. 이미지에도 적용되나요?
네, clip-path는 div·버튼뿐 아니라 img 태그에도 그대로 적용됩니다. 사진을 육각형·원·별 모양으로 보이게 하고 싶을 때 이미지에 같은 clip-path 코드를 넣으면 됩니다. 좌표를 %로 두면 이미지 크기가 달라져도 비율에 맞춰 잘리므로 반응형에서도 모양이 유지됩니다.
Q. 그림자가 안 보여요.
box-shadow는 요소의 사각형 박스를 기준으로 그려지므로 clip-path로 잘린 도형에는 함께 잘려 보이지 않습니다. 잘린 모양을 따라가는 그림자가 필요하면 부모 요소에 filter: drop-shadow(...)를 주세요. drop-shadow는 실제로 보이는 도형 외곽을 따라 그림자를 그립니다.
함께 보면 좋은 도구