CSS clip-path로 요소를 도형 모양으로 자릅니다. 12가지 프리셋 중 선택하면 즉시 미리보기와 코드가 만들어집니다.
CSS 코드
CSS 클립패스 사용법
- 도형 프리셋 버튼을 클릭합니다.
- 미리보기가 즉시 변경됩니다.
- 복사 버튼으로 CSS 코드를 가져갑니다.
- 자신의 요소(이미지, div 등)에 적용해 도형 모양으로 자릅니다.
주요 기능
- 12가지 도형 프리셋 (원, 타원, 다각형, 별, 화살표, 말풍선 등)
- 실시간 미리보기 (그라데이션 배경)
- 한 번 클릭으로 CSS 코드 복사
- 이미지·div·버튼 어디든 적용 가능
활용 예시
- 이미지 마스킹 — 사진을 원·도형 모양으로 자르기
- 섹션 디바이더 — 페이지 사이 비스듬한 경계
- 강조 효과 — 별·다이아몬드로 시선 끌기
- 아바타 모양 — 육각형 등 독특한 프로필 사진
- 말풍선 UI — 채팅·코멘트 UI 디자인
clip-path란?
요소를 지정한 도형 모양으로 잘라내어 그 부분만 보이게 하는 CSS 속성입니다. 잘려나간 영역은 클릭도 안 됩니다(이벤트 차단). 모든 모던 브라우저에서 지원되며, SVG의 clipPath를 참조하는 방식과 CSS basic shape(circle, ellipse, polygon) 모두 사용 가능합니다.
자주 묻는 질문
이미지에도 적용되나요?
네, <img> 태그에 직접 clip-path를 적용하면 이미지가 도형 모양으로 잘립니다. border-radius보다 훨씬 자유롭게 모양을 만들 수 있습니다.
잘린 영역은 어떻게 되나요?
시각적으로 안 보일 뿐 아니라 마우스 클릭·호버 이벤트도 받지 않습니다. 즉, 잘린 영역에 다른 요소가 있다면 그 요소가 클릭됩니다.
애니메이션이 가능한가요?
가능합니다. transition: clip-path 0.3s로 도형 변화를 부드럽게 애니메이션할 수 있습니다. 단, 같은 종류의 도형(예: polygon → polygon)일 때만 자연스럽고, polygon → circle은 갑자기 바뀝니다.
브라우저 호환성은?
Chrome·Firefox·Safari·Edge 모두 지원합니다. 일부 구형 브라우저는 -webkit-clip-path 접두사가 필요할 수 있어 함께 사용하면 안전합니다.