clip-path 생성기

작동 방식

clip-path는 요소를 윤곽선 모양으로 잘라냅니다. 모양 바깥은 그려지지도 않고 클릭되지도 않으므로 모양의 그림이 아니라 실제 모양이 되며, 이미지와 동영상을 포함한 모든 요소에 적용됩니다.

픽셀이 아니라 퍼센트

다각형의 점은 요소 자체의 너비와 높이에 대한 퍼센트로 지정되므로, 크기가 달라져도 모양이 깨지지 않고 요소와 함께 늘어납니다. 그래서 반응형 레이아웃에서 쓸 수 있습니다.

클릭도 모양을 따릅니다

이 점이 clip-path와 장식용 오버레이의 차이입니다. 잘려 나간 영역은 포인터 이벤트를 전혀 받지 않으므로, 삼각형 버튼은 눈에도 마우스에도 삼각형입니다.

모양 사이의 애니메이션

다각형이 다른 다각형으로 부드럽게 전환되려면 두 다각형의 점 개수가 같아야 합니다. 보통은 더 단순한 모양에 중복된 점을 채워 개수를 맞춥니다. 예를 들어 점 네 개로 쓰되 두 개를 같은 위치에 둔 삼각형은 사각형으로 변할 수 있습니다.

-webkit- 줄

현재 브라우저에는 접두사 없는 속성만 있으면 됩니다. 접두사가 붙은 복사본은 일부 오래된 Safari 버전에서 아직 필요하고 남겨 두어도 비용이 들지 않아 포함했습니다.

하지 않는 일

잘라내기만 하고 레이아웃을 다시 배치하지는 않습니다. 주변 텍스트는 여전히 그 요소를 원래의 직사각형으로 취급합니다. 텍스트가 모양을 따라 감싸게 하려면 같은 문법을 쓰는 shape-outside가 필요합니다.