CSS clip-path 생성기는 clip-path: polygon(...) 선언을 대신 써 줍니다. 삼각형, 마름모, 오각형, 육각형, 화살표, 말풍선, 별, 십자, 사다리꼴, 배지 중 하나로 시작해서 미리보기 위의 번호 붙은 꼭짓점을 끌거나, 모서리를 더블클릭해 점을 추가하거나, x, y 좌표를 0에서 100 사이 퍼센트로 직접 입력하면 즉시 모양이 바뀝니다. 결과는 어떤 요소에든 붙여 넣을 수 있는 한 줄입니다.
비스듬한 가장자리가 있는 히어로 배너, 육각형 아바타 마스크, 쉐브론 모양 브레드크럼, 말풍선 꼬리처럼 SVG나 PNG 마스크를 따로 만들기 번거로운 곳에 쓰기 좋습니다. 좌표가 요소 박스 대비 퍼센트라서 같은 값이 요소 크기에 맞춰 늘어나고 추가 이미지 파일도 필요 없습니다.
입력한 좌표는 브라우저 안에서 처리되며 서버로 전송되지 않습니다. 이 도구는 clip-path 중 점 3~24개짜리 polygon() 형태만 만들고, circle(), ellipse(), inset(), path() 곡선은 만들지 않습니다.
사용 방법
시작 도형 고르기
삼각형(3점), 마름모(4점), 오각형(5점), 육각형(6점), 화살표(7점), 말풍선(7점), 별(10점), 십자(12점), 사다리꼴(4점), 배지(8점) 중에서 고릅니다. 프리셋은 출발점일 뿐이라 이후에 점을 더하거나 뺄 수 있습니다.
점 끌기·추가·삭제
미리보기의 번호 핸들을 끌어 옮기거나, 핸들에 초점을 두고 방향키(Shift는 5%씩)로 움직입니다. 모서리를 더블클릭하면 그 자리에 점이 생기고, 선택한 점은 Delete로 지우며, Shift를 누르거나 5% 격자를 켜면 격자에 맞춰집니다. X는 왼쪽에서 오른쪽, Y는 위에서 아래 방향이라 0% 0%가 왼쪽 위 모서리입니다.
미리보기 확인하기
샘플 카드가 생성된 값으로 실시간으로 잘리고, 잘려 나간 부분은 흐린 잔상으로 보입니다. 배경을 어둡게, 밝게, 격자로 바꿔 보고 변이 서로 교차해 구멍이 나거나 겹치지 않는지 확인합니다.
선언 복사하기
속성 이름과 세미콜론이 이미 포함된 한 줄을 복사해 대상 요소의 규칙에 붙여 넣습니다.
요소에 적용하기
요소에 실제 크기와 배경을 먼저 주세요. 다각형은 그 박스 중 어느 부분을 보이게 할지만 정합니다.
작동 원리
polygon()이 요소 박스에 대응되는 방식
polygon()은 CSS Masking Module Level 1에 정의된 기본 도형 함수입니다. 값 한 쌍이 꼭짓점 하나이고, 브라우저는 적은 순서대로 점을 이은 뒤 마지막에서 첫 점으로 닫습니다. 퍼센트는 별도의 박스 키워드를 주지 않으면 border box를 기준으로 계산됩니다.
원점은 박스의 왼쪽 위이고 X는 오른쪽, Y는 아래쪽으로 커집니다. 따라서 50% 0%는 위쪽 변의 한가운데, 100% 100%는 오른쪽 아래 모서리입니다.
clip-path: polygon(50% 0%, 100% 100%, 0% 100%);생성기가 받아들이는 값
내부 함수는 점이 3개 이상 24개 이하여야 하고, 모든 좌표가 0에서 100 사이의 유한한 숫자여야 합니다. 범위를 벗어나면 거부되므로 100.04 같은 값은 반올림되기 전에 오류로 표시되고, 핸들을 끌어도 상자 밖으로 나가지 않습니다.
출력할 때 좌표는 소수 첫째 자리로 반올림합니다. 33.333은 33.3%, 12.25는 12.3%가 됩니다. 더블클릭하면 가장 가까운 변에 점을 투영한 뒤 소수 첫째 자리로 반올림하므로, 삽입된 각 좌표는 최대 0.05%포인트 움직일 수 있습니다. 프리셋별 점 개수는 아래와 같습니다.
| 프리셋 | 점 개수 | 주로 쓰는 곳 |
|---|---|---|
| 삼각형 | 3 | 툴팁 꼬리, 재생 아이콘, 드롭다운 화살표 |
| 마름모 | 4 | 회전한 정사각형 배지, 섹션 구분선 |
| 사다리꼴 | 4 | 원근감 있는 배너, 탭 |
| 오각형 | 5 | 방패·홈플레이트 모양 |
| 육각형 | 6 | 아바타 마스크, 벌집형 그리드 |
| 화살표 | 7 | 쉐브론 버튼, 단계 표시 |
| 말풍선 | 7 | 꼬리가 달린 채팅 말풍선 |
| 배지 | 8 | 팔각형 라벨, 모서리를 자른 카드 |
| 별 | 10 | 별점, 스티커 효과 |
| 십자 | 12 | 더하기 아이콘, 의료 표시 |
채우기 규칙과 애니메이션
키워드를 쓰지 않으면 polygon()은 nonzero 채우기 규칙을 씁니다. 변이 교차해도 겹친 부분이 채워지고, polygon(evenodd, ...)를 쓰면 겹친 부분이 비워집니다. 이 생성기는 evenodd 키워드를 출력하지 않으니 필요하면 직접 추가하세요.
두 다각형 사이의 transition은 점 개수가 같을 때만 보간됩니다. 같은 프리셋에서 두 상태를 만들고 꼭짓점 위치만 옮기면 애니메이션이 매끄럽게 이어집니다.
실제 예시
프리셋: 육각형, 좌표 그대로 (25 0, 75 0, 100 50, 75 100, 25 100, 0 50)polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)생성기 코드로 출력을 확인했습니다. 정사각형이나 가로로 넓은 박스에서 위아래가 평평한 육각형이 됩니다.
점 5개: 0 0, 100 0, 100 85, 50 100, 0 85polygon(0% 0%, 100% 0%, 100% 85%, 50% 100%, 0% 85%)히어로 영역에서 자주 쓰는 모양입니다. 잘려 나가는 아래쪽 모서리에 글자가 걸리지 않게 아래 여백을 넉넉히 주세요.
점 3개: 0 0, 33.333 12.25, 100 100polygon(0% 0%, 33.3% 12.3%, 100% 100%)프리셋: 말풍선polygon(0% 0%, 100% 0%, 100% 72%, 58% 72%, 30% 100%, 34% 72%, 0% 72%)꼬리가 본체 아래 왼쪽으로 늘어집니다. 박스 자체가 줄어드는 것은 아니므로 꼬리 쪽 아래 여백을 따로 확보하세요.
점 3개: 0 0, 100 0, 0 100.04오류: Use 3 to 24 points within 0 to 1000 미만이나 100 초과 좌표는 쓸 수 없습니다. 도구에서는 입력칸에 안내가 뜨고 결과는 마지막으로 유효했던 도형을 유지합니다.
자주 하는 실수
잘려 나간 영역은 클릭이 안 됩니다
포인터 이벤트는 보이는 다각형 안에서만 잡힙니다. 육각형으로 자른 버튼은 잘린 모서리를 눌러도 반응하지 않습니다. 의도한 동작이지만 큰 래퍼 요소를 자르면 당황하기 쉽습니다.
그림자와 테두리도 함께 잘립니다
clip-path는
box-shadow,outline, 테두리까지 요소가 그리는 모든 것을 자릅니다. 그림자를 남기려면 잘리는 자식이 아니라 부모에filter: drop-shadow()를 적용하세요.퍼센트는 정사각형이 아니라 박스를 기준으로 합니다
같은 육각형 값도 400 x 100 박스에서는 가로 25%가 세로 25%보다 훨씬 커서 찌그러져 보입니다. 실제 가로세로 비율에서 모양을 확인하세요.
변이 교차하면 구멍이나 겹침이 생깁니다
꼭짓점을 이웃 점 너머로 옮기면 윤곽이 스스로 교차합니다. 점은 도형을 한 바퀴 도는 순서(시계 방향이든 반시계 방향이든)로 일관되게 두세요.
점 개수가 다르면 애니메이션이 이어지지 않습니다
한 상태가 4점, 다른 상태가 6점이면 모양이 부드럽게 변하지 않고 즉시 바뀝니다. 필요하면 점 하나를 겹쳐 적어서 개수를 맞추세요.
자주 묻는 질문
CSS clip-path로 삼각형은 어떻게 만드나요?
배경이 있는 박스에 clip-path: polygon(50% 0%, 100% 100%, 0% 100%);를 쓰면 됩니다. 첫 점이 위쪽 가운데, 둘째가 오른쪽 아래, 셋째가 왼쪽 아래입니다. 이 도구의 삼각형 프리셋이 정확히 이 값을 만듭니다.
다각형에 점을 몇 개까지 쓸 수 있나요?
점은 3개에서 24개까지, 각 좌표는 0~100% 범위여야 합니다. 프리셋은 3~12점이며, 모서리를 더블클릭하거나 추가 버튼으로 점을 늘리고 Delete나 삭제 버튼으로 최소 3점까지 줄일 수 있습니다.
퍼센트 대신 px 단위를 쓸 수 있나요?
CSS 자체는 polygon() 안에서 10px 같은 길이도 허용하지만 이 생성기는 퍼센트만 출력합니다. 퍼센트는 요소 크기가 바뀌어도 모양 비율이 유지되어 반응형 레이아웃에 잘 맞습니다.
자르고 나니 그림자가 사라졌어요.
clip-path는 다각형 밖을 모두 지우기 때문에 요소 자신의 box-shadow도 사라집니다. 래퍼에 filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3))를 주고 안쪽 요소를 자르세요.
최신 브라우저에서 모두 동작하나요?
기본 도형을 쓰는 clip-path는 현재 Chrome, Edge, Firefox, Safari에서 지원됩니다. 오래된 Safari는 -webkit-clip-path 접두사가 필요했으니 그런 환경을 지원해야 할 때만 추가하세요.
border-radius와는 어떻게 다른가요?
border-radius는 박스의 네 모서리만 둥글게 합니다. clip-path는 직선으로 이루어진 임의의 모양을 만들고, 잘린 부분은 클릭 판정에서도 빠집니다. border-radius도 둥글게 깎인 모서리 바깥은 포인터 이벤트를 받지 않습니다(CSS Backgrounds and Borders Level 3, 모서리 클리핑). 다만 테두리 박스의 둥근 모서리에 한정되고, 다각형은 만들 수 없으며, 자손 요소까지 자르려면 overflow도 지정해야 합니다.
마지막 업데이트: