CSS 클립패스 생성기

도형 clip-path를 골라 CSS 코드를 만듭니다.

도형을 누르면 미리보기와 clip-path 코드가 갱신됩니다. 이미지나 박스에 그대로 적용하세요.

말풍선이나 비스듬히 잘린 배너를 만들려고 이미지 파일을 따로 준비해 본 적이 있을 겁니다. CSS clip-path를 쓰면 요소의 일부만 남기고 잘라내 같은 모양을 만들 수 있습니다.

이 도구는 자주 쓰는 도형 열 가지를 버튼으로 준비해 두었습니다. 누르면 미리보기 상자가 그 모양으로 바뀌고 아래에 CSS 한 줄이 나옵니다.

어떻게 계산되나요

clip-path는 요소에서 보여줄 영역을 지정하고 나머지를 잘라내는 속성입니다. 실제로 지워지는 게 아니라 화면에만 안 보이는 것이라, 배경색·이미지·그림자 어디에나 적용할 수 있습니다.

계열	도형	문법
다각형	삼각형, 마름모, 오각형, 육각형, 별, 말풍선, 평행사변형, 화살표	`polygon(x y, x y, ...)`
곡선	원	`circle(반지름 at 중심x 중심y)`
곡선	타원	`ellipse(가로반지름 세로반지름 at 중심x 중심y)`

polygon() 안의 좌표는 요소 크기 대비 퍼센트입니다. 50% 0%는 위쪽 가운데, 100% 100%는 오른쪽 아래 모서리를 뜻하고, 점을 순서대로 이어 도형을 만듭니다. 퍼센트라서 요소 크기가 바뀌어도 비율이 유지됩니다.

잘려 나간 부분은 클릭·마우스오버도 받지 않습니다.
box-shadow는 잘린 뒤 모양을 따라가지 않으므로, 그림자가 필요하면 filter: drop-shadow()를 쓰는 편이 자연스럽습니다.
좌표를 직접 수정하면 준비된 도형 외에 원하는 모양도 만들 수 있습니다.

clip-path를 넣었는데 아무 변화가 없습니다

적용 대상에 크기가 없을 때 자주 생기는 문제입니다. `display: inline` 요소이거나 너비·높이가 0이면 잘라낼 영역 자체가 없습니다. `display: block`(또는 `inline-block`)과 크기를 먼저 지정한 뒤 다시 확인해 보세요.

잘린 부분도 클릭되나요?

아니요. `clip-path`로 사라진 영역은 화면에서 보이지 않을 뿐 아니라 클릭·마우스오버 같은 마우스 이벤트도 받지 않습니다. 버튼에 적용할 때는 실제로 눌리는 범위가 도형 안쪽으로 줄어든다는 점을 감안하세요.

그림자가 도형 모양대로 안 생깁니다

`box-shadow`는 요소의 원래 사각형을 기준으로 그려진 뒤 함께 잘려 나갑니다. 도형 윤곽을 따라가는 그림자가 필요하면 부모 요소에 `filter: drop-shadow(0 2px 6px rgba(0,0,0,.3))`를 주는 방법을 씁니다.

원하는 모양이 목록에 없는데요

복사한 코드의 좌표를 직접 고치면 됩니다. `polygon()` 안의 점을 추가하거나 옮기면 새로운 도형이 되고, 좌표가 퍼센트라 요소 크기가 달라져도 비율이 유지됩니다.

이미지에도 쓸 수 있나요?

`img` 태그를 포함해 대부분의 요소에 적용됩니다. 사진을 육각형이나 원으로 보여주고 싶을 때 이미지 파일을 따로 만들지 않아도 되고, 원이라면 `border-radius: 50%`로도 같은 효과를 낼 수 있습니다.