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

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

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

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

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

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