- 위쪽 도형 목록에서 원하는 모양(삼각형·육각형·별·말풍선 등)을 클릭합니다.
- 가운데 미리보기 박스에 그 도형이 곧바로 적용돼 실제로 어떻게 잘리는지 확인합니다.
- 아래 코드 박스의
clip-path값을 "CSS 복사"로 가져가, 원하는 요소(div·이미지)의 스타일에 붙여넣습니다.
clip-path는 요소의 보이는 영역을 도형으로 잘라내는 속성입니다. 가장 많이 쓰는 polygon()은 잘라낼 도형의 꼭짓점을 차례로 이은 것으로, 각 점은 가로% 세로% 쌍입니다. 왼쪽 위가 0% 0%, 오른쪽 아래가 100% 100%입니다.
- polygon(): 점을 시계 방향으로 이어 삼각형·육각형·별 같은 각진 도형을 만듭니다. 점이 많을수록 복잡한 모양이 됩니다.
- circle()·ellipse(): 반지름과 중심점으로 원·타원을 잘라냅니다. circle(50% at 50% 50%)은 정중앙의 원입니다.
- 좌표는 %로: 퍼센트는 요소 크기 기준이라 크기가 달라져도 비율대로 잘려 반응형에 안전합니다.
도형별 좌표 레시피와 활용 예는 clip-path 가이드에 정리했습니다.
- 반응형은 % 좌표로: 이 도구는 좌표를 퍼센트(%)로 만듭니다. 그래서 요소 크기가 달라져도 비율에 맞춰 잘려 모양이 유지됩니다. 픽셀 고정값으로 바꾸면 화면 크기에 따라 도형이 어긋날 수 있으니, 반응형에서는 % 그대로 두는 것이 안전합니다.
- 그림자는 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를 함께 적어주면 안전합니다.
clip-path는 요소의 보이는 영역을 다각형·원·타원 같은 도형으로 잘라내는 CSS 속성입니다. 예를 들어 polygon(50% 0, 100% 100%, 0 100%)을 주면 사각형 요소가 삼각형 모양으로만 보입니다. 잘린 바깥 부분은 화면에 그려지지 않고 클릭도 통과시키므로, 별도 이미지 없이 도형 모양 배경·버튼·카드를 만들 수 있습니다.
네, clip-path는 div·버튼뿐 아니라 img 태그에도 그대로 적용됩니다. 사진을 육각형·원·별 모양으로 보이게 하고 싶을 때 이미지에 같은 clip-path 코드를 넣으면 됩니다. 좌표를 %로 두면 이미지 크기가 달라져도 비율에 맞춰 잘리므로 반응형에서도 모양이 유지됩니다.
box-shadow는 요소의 사각형 박스를 기준으로 그려지므로 clip-path로 잘린 도형에는 함께 잘려 보이지 않습니다. 잘린 모양을 따라가는 그림자가 필요하면 부모 요소에 filter: drop-shadow(...)를 주세요. drop-shadow는 실제로 보이는 도형 외곽을 따라 그림자를 그립니다.
clip-path는 요소 전체를 자르므로 안에 든 글자도 도형 밖으로 나가면 함께 잘립니다. 글자가 안전하게 보이려면 도형 안쪽에 충분한 여백을 두거나, 자를 요소와 글자를 분리해 글자는 자르지 않은 별도 요소에 올리세요. 삼각형처럼 좁아지는 모양일수록 안쪽 여백을 넉넉히 잡는 것이 좋습니다.
네. 잘려서 보이지 않는 바깥 영역은 마우스 클릭도 통과시키고, 보이는 도형 안쪽만 실제로 클릭됩니다. 그래서 별 모양 버튼을 만들면 별 안을 눌렀을 때만 반응합니다. 사각형 박스 전체가 클릭되던 일반 요소와 달리, 실제 보이는 모양대로 클릭 영역이 정해집니다.