CSS 클립 경로 생성기

CSS 클립 경로는 x/y 좌표 쌍의 개수에 관계 없이 구성된 다각형() 함수를 허용합니다. 즉, 대부분의 사람들이 접근할 수 있는 단순한 직사각형과 원을 훨씬 넘어서는 모양으로 상자를 조각할 수 있습니다. 문제는 이러한 좌표를 손으로 입력하는 것이 지루하고 기본 삼각형을 넘어서는 어떤 것에도 제대로 맞추는 것이 거의 불가능하다는 것입니다. 이 생성기는 해당 좌표 목록을 실시간 미리 보기에서 드래그 가능한 점 세트로 변환하므로 표시되는 모양은 항상 CSS가 생성하는 모양입니다.

미리보기의 모든 점은 상자 너비와 높이의 백분율로 저장됩니다. 이는 정확히 클립 경로: 다각형() 자체가 내부적으로 작동하는 방식입니다. 이러한 방식으로 작성된 모양은 작은 아이콘 마스크에서 전체 너비 영웅 배너에 이르기까지 실제 페이지에서 요소의 크기에 상관없이 비율을 정확하게 유지합니다. 임의의 점을 드래그하여 윤곽선 모양을 변경하고, 가장자리 가까이를 클릭하여 클릭한 위치에 정확히 새 점을 추가하거나, 기존 점을 두 번 클릭하여 삭제합니다. 다각형은 더 적은 수로 존재할 수 없기 때문에 편집기는 항상 최소 3개의 점을 유지합니다.

6개의 번들 사전 설정은 클립 경로가 볼록한 모양 이상의 기능을 수행할 수 있음을 입증하기 위해 선택되었습니다. 별과 화살표는 모두 안쪽을 가리키는 반사 각도에 의존하고, 말풍선은 평범한 직사각형에서 삼각형 꼬리를 조각하고, 티켓 스터브는 실제 천공 티켓이 보이는 것처럼 반대쪽 가장자리에 두 개의 노치를 움푹 패입니다. 사전 설정을 로드하고 거기에서 계속 드래그하세요. 편집기에 관한 어떤 것도 시작 모양에 고정되지 않습니다.

자신의 이미지를 업로드하여 일반 상자 대신 실제 콘텐츠에 대한 클립 경로를 미리 보거나, 업로드를 완전히 건너뛰고 미리 보기가 줄무늬 패턴으로 돌아가므로 잘라낸 모양이 어느 쪽에서든 선명하게 보입니다. 이 사이트의 모든 도구와 마찬가지로 모든 것이 브라우저에서 로컬로 실행됩니다. 이미지가 장치를 떠나지 않으며 페이지가 로드된 후에도 생성기는 오프라인으로 계속 작동합니다.