드래그 앤 드롭으로 다각형 클립 패스를 만들고 CSS 코드를 자동 생성하세요. 삼각형, 육각형, 별모양 등 다양한 프리셋 제공.
포인트를 드래그하여 모양을 수정하세요. 선을 클릭하면 포인트 추가, 포인트를 우클릭하면 삭제됩니다.
clip-path: polygon(50.0% 0.0%, 0.0% 100.0%, 100.0% 100.0%);
기본 제공되는 도형 프리셋(삼각형, 육각형, 별 등) 중 하나를 선택하거나 '사용자 정의'를 선택하여 처음부터 만드세요.
흰색 원형 포인트를 드래그하여 모양을 자유롭게 수정하세요. 도형의 각 꼭짓점을 정밀하게 조정할 수 있습니다.
도형의 선(edge)을 클릭하면 새로운 포인트가 추가됩니다. 기존 포인트를 우클릭(또는 모바일에서 길게 누르기)하면 삭제할 수 있습니다.
원하는 모양이 완성되면 '코드 복사' 버튼을 클릭하여 CSS clip-path 코드를 클립보드에 복사하고 프로젝트에 바로 적용하세요.
웹사이트의 섹션 구분선을 직선이 아닌 다각형이나 곡선으로 디자인하여 독창적인 레이아웃을 만들 수 있습니다. 예를 들어 히어로 섹션 하단을 삼각형 패턴으로 마무리하면 역동적인 느낌을 줄 수 있습니다.
프로필 사진이나 제품 이미지를 육각형, 다이아몬드 등 특이한 모양으로 자르면 시각적 흥미를 높일 수 있습니다. 갤러리 레이아웃에서 모든 이미지를 같은 클립 패스로 통일하면 일관성도 유지됩니다.
화살표 모양 버튼, 별 모양 배지, 십자가 모양 닫기 버튼 등 아이콘 없이도 CSS만으로 독특한 UI 요소를 만들 수 있습니다. SVG 대신 순수 CSS로 구현하여 성능도 향상됩니다.
border-radius는 모서리를 둥글게 만들지만 clip-path는 임의의 다각형 모양으로 요소를 자를 수 있습니다. clip-path가 훨씬 자유롭고 복잡한 모양을 만들 수 있습니다. 예를 들어 삼각형, 별, 화살표 등은 border-radius로는 불가능하지만 clip-path로는 쉽게 구현할 수 있습니다.
복사한 clip-path 코드를 CSS 클래스에 추가하면 됩니다. 예: .my-element { clip-path: polygon(...); } 이렇게 하면 해당 요소가 정의한 모양으로 잘립니다. 이미지, div, 버튼 등 모든 HTML 요소에 적용 가능합니다.
현재 이 도구는 시각적 편집에 최적화되어 있어 드래그 방식만 지원합니다. 정밀한 좌표 입력이 필요하다면 생성된 CSS 코드를 복사한 후 텍스트 에디터에서 수동으로 수정하세요. 각 포인트는 백분율(%)로 표현되므로 0~100 범위 내에서 조정하면 됩니다.
네, 터치 스크린에서도 포인트를 드래그할 수 있습니다. 단, 우클릭 대신 포인트를 길게 눌러 삭제 메뉴를 띄울 수 있습니다. 정밀한 작업은 데스크톱에서 하는 것을 권장하지만 기본적인 편집은 모바일에서도 가능합니다.
네, CSS transition을 사용하여 clip-path를 부드럽게 변환할 수 있습니다. 단, 시작과 끝 polygon의 포인트 개수가 동일해야 합니다. 예: transition: clip-path 0.3s ease; 를 추가하고 hover 시 다른 polygon 값을 적용하면 모핑 효과를 만들 수 있습니다.
clip-path는 Internet Explorer에서 지원하지 않습니다. 하지만 Chrome, Firefox, Safari, Edge 등 모든 최신 브라우저에서는 완벽하게 작동합니다. IE 지원이 필요한 경우 SVG clipPath 요소를 대안으로 사용하거나 이미지를 사용한 마스킹 기법을 고려하세요.
clip-path는 시각적으로만 요소를 자르며 실제 레이아웃 크기는 변경하지 않습니다. 따라서 잘린 부분이 투명해도 그 영역은 여전히 공간을 차지합니다. 주변 요소와 겹침을 방지하려면 margin이나 padding을 조정하세요.