CSS Clip-Path 생성기

CSS clip-path는 여러 쌍의 x/y 좌표로 이루어진 polygon() 함수를 받습니다. 즉, 대부분의 사람들이 흔히 사용하는 단순한 사각형이나 원을 훨씬 뛰어넘는 모양으로 상자를 오려낼 수 있습니다. 하지만 좌표를 직접 입력하는 것은 지루하고, 기본 삼각형을 넘어서는 모양은 정확히 맞추기가 거의 불가능합니다. 이 생성기는 그 좌표 목록을 실시간 미리 보기 위에서 드래그 가능한 점들로 바꿔주므로, 눈에 보이는 모양이 곧 CSS가 만들어낼 모양입니다.

미리 보기의 모든 점은 상자의 너비와 높이에 대한 백분율로 저장되며, 이는 clip-path: polygon()이 내부적으로 동작하는 방식과 정확히 같습니다. 이런 방식으로 만들어진 모양은 작은 아이콘 마스크부터 가로 폭 전체 히어로 배너까지, 실제 페이지에서 요소가 어떤 크기로 표시되든 비율이 올바르게 유지됩니다. 점을 드래그하여 윤곽선을 변경하고, 모서리 가까이를 클릭하여 정확한 위치에 새 점을 추가하거나, 기존 점을 더블클릭하여 삭제할 수 있습니다. 편집기는 항상 최소 3개의 점을 유지합니다.

포함된 6가지 프리셋은 clip-path가 볼록한 모양 이상을 표현할 수 있음을 입증합니다. 별과 화살표는 안쪽으로 꺾인 반사각을 이용하고, 말풍선은 평범한 사각형에서 삼각형 꼬리를 잘라내며, 티켓 스텁은 실제 찢어지는 티켓처럼 반대편 모서리에 두 개의 노치를 냅니다. 어떤 프리셋이든 불러온 뒤 그 상태에서 점을 계속 드래그하면 됩니다. 편집기가 시작 모양에만 고정되어 있지는 않습니다.

자신의 이미지를 업로드하여 단순한 상자 대신 실제 콘텐츠를 배경으로 클립 패스를 미리 볼 수 있습니다. 이미지를 업로드하지 않으면 미리 보기가 줄무늬 패턴으로 표시되어 잘라낸 모양이 또렷하게 보입니다. 이 사이트의 모든 도구와 마찬가지로, 전체 과정이 브라우저 안에서 로컬로 실행됩니다. 이미지가 기기를 떠나는 일은 없으며, 페이지를 로드한 후에는 오프라인에서도 계속 작동합니다.