Each point uses a percentage from the left and top edge of the element.
로컬 CSS clip-path 생성기
실시간 미리보기로 CSS clip-path 도형 만들기
기본 도형을 고르고 각 점의 좌표를 조정한 뒤 반응형 polygon CSS 선언을 복사하세요.
* 모든 처리는 브라우저에서 진행됩니다. 업로드나 그리기 데이터가 페이지 밖으로 나가지 않습니다.
점 1
점 2
점 3
점 4
CSS 준비 완료
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);ClipBox
QUICK GUIDE
polygon 점이 테두리를 결정합니다
Keep points in perimeter order for a clean shape instead of crossing edges.
The same percentages scale with the element, so the clip stays responsive.
Use presets as a starting point, then tune the coordinates for your component.
FAQ
CSS clip-path questions
What does clip-path do?
It creates a clipping region that controls which part of an element remains visible.
Why use percentages?
Percentage coordinates adapt to the element's own width and height, which keeps the shape responsive.
Can I use these points on an image?
Yes. Apply the copied declaration to an image, card, button, or other element.