CSS clip-path 빌더 (원, 타원, 다각형, Inset)

사용법

1. 도형 선택: 원 (반지름 + 중심), 타원 (두 반지름 + 중심), 다각형 (3-16 꼭짓점), inset (각 변에서 잘라낸 직사각형 + 선택적 둥근 모서리).
2. 슬라이더나 숫자 입력으로 조정. 다각형의 경우 미리보기 아무 곳이나 클릭해 그 위치에 꼭짓점 추가.
3. 프리셋 (삼각형, 육각형, 별, 화살표…)을 눌러 알려진 도형에서 시작해 편집.
4. 미리보기 배경 (이미지·단색·그라데이션)을 바꿔 실제 콘텐츠에서 도형이 어떻게 보일지 확인.
5. CSS 복사 — 현대 `clip-path` 와 구형 Safari 용 `-webkit-clip-path` 폴백 모두 포함.

자주 묻는 질문

왜 clip-path는 퍼센트를 쓰나요?

퍼센트는 도형을 반응형으로 만듭니다: `polygon(50% 0%, 100% 100%, 0% 100%)` 삼각형은 요소가 100px 이든 1000px 이든 삼각형 유지. px, em, rem 같은 절대 단위도 가능하지만 재사용 컴포넌트에는 거의 항상 %가 맞아요. 이 도구는 %만 출력 — 붙여넣은 뒤 정말 고정 크기가 필요하면 CSS에서 단위 바꾸세요.

요소가 원래 공간을 그대로 차지하나요?

네. `clip-path` 는 순수히 페인트 시점 효과 — 요소의 레이아웃 박스는 변하지 않아 주변 콘텐츠는 원래 사각형 주위로 흐르지 클리핑된 모양 주위가 아닙니다. 레이아웃이 보이는 모양을 따라야 한다면 `shape-outside` (별도 속성), `mask-image`, 또는 path가 있는 SVG 사용.

clip-path 애니메이션 가능?

네, 그러나 같은 도형 패밀리에서 같은 꼭짓점 수의 경로 사이에서만 — 동일한 꼭짓점 수의 다각형끼리, 또는 원끼리, 그러나 다각형↔원은 안 됨. 다각형 모핑에는 두 상태가 같은 점 수를 거의 같은 순서로 가져야 함. 브라우저는 꼭짓점 좌표를 선형 보간.

inset의 'round' 값은?

inset 사각형의 네 모서리에 적용되는 선택적 반지름 — `border-radius` 와 같은 문법. `inset(10% round 5%)` 는 둥근 모서리 직사각형 클립. 뾰족한 모서리는 0 (round 없음). CSS 스펙은 모서리별 다른 반지름도 허용 (`round 10% 20% 5% 15%`) 하지만 이 도구는 균일 값 하나로 단순화.

왜 clip-path와 -webkit-clip-path 둘 다?

Safari는 14.1 (2021) 이전 버전에 `-webkit-clip-path` 프리픽스 필요. 거의 모든 현재 브라우저는 프리픽스 없는 `clip-path` 지원. 둘 다 내보내는 건 비용이 없고 약간 구형 기기를 보호. evergreen 브라우저만 대상이면 `-webkit-` 줄 삭제 가능.

관련 도구