CSS 클립 패스 생성기

캔버스에서 직접 모양을 만들어 보세요. 다각형의 꼭짓점을 드래그하고 둥근 모양도 살펴본 후 CSS 또는 SVG로 내보낼 수 있습니다.

실시간 미리보기

꼭짓점을 드래그하거나 방향키로 이동하세요. Shift를 누르면 10%씩 이동합니다. Delete 키로 삭제할 수 있습니다.

clip-path: polygon(25% 5%, 75% 5%, 100% 50%, 75% 95%, 25% 95%, 0% 50%);

모든 처리는 브라우저 안에서 이루어집니다.

형식 참고 자료

MDN — clip-path

도구 페이지 업데이트: 2026-10-24