polygon 좌표를 순서대로 잇는 방식
clip-path 의 polygon() 은 적은 좌표를 순서대로 이어 테두리를 만들고 그 안쪽만 남깁니다. 좌표는 요소 박스의 가로·세로 백분율이고 왼쪽 위가 0% 0% 입니다. 여기서는 좌표를 줄 단위로 받아 선언을 만들고, 같은 좌표를 미리보기 박스에 바로 적용합니다.
순서가 꼬이면 도형이 깨집니다
점을 테두리 따라가는 순서로 적지 않으면 변끼리 교차해 사각형이 나비 모양이 됩니다. 이 도구는 모든 변 조합을 검사해 교차하는 두 변의 번호를 알려 주고, 점이 한 직선 위에 있어 면적이 0 인 경우도 막습니다. 면적은 신발끈 공식으로 계산해 요소 박스 대비 백분율로 보여 줍니다(2026년 10월 기준 W3C CSS Masking 명세).
하지 않는 것
circle·ellipse·inset 같은 다른 도형 함수와 SVG 경로를 쓰는 path() 는 만들지 않습니다. 좌표를 px 로 넣는 방식도 지원하지 않으며 백분율만 씁니다. 구형 Safari 를 위해 -webkit-clip-path 를 같은 값으로 함께 적어 둡니다.
자주 묻는 질문
좌표 순서가 왜 중요한가요?
점을 적은 순서대로 변이 이어지기 때문입니다. 테두리를 따라가지 않는 순서로 적으면 변끼리 교차해 사각형이 나비 모양처럼 꼬입니다.
좌표를 0~100% 밖으로 적어도 되나요?
문법상 가능하지만 요소 박스 밖이라 그 부분은 보이지 않습니다. 이 도구는 막지 않고 밖에 있는 점이 몇 개인지 알려 줍니다.
-webkit-clip-path 를 꼭 같이 적어야 하나요?
최신 브라우저는 표준 속성만으로 동작합니다. 구형 Safari 를 함께 지원하려면 같은 값을 접두사 속성에도 적어 두는 편이 안전합니다.