CSS clip-path 메이커

사용 방법

1. 사전 설정 모양을 선택하거나 SVG 편집기에서 기본 다각형으로 시작하세요.
2. 원형 핸들을 드래그하여 다각형의 각 꼭짓점을 재배치하세요.
3. 새 점(선택된 가장자리의 중점에서 삽입)을 추가하거나 선택한 점을 제거하세요.
4. 좌표 입력에서 정확한 X/Y 백분율을 미세 조정하세요.
5. 생성된 clip-path CSS를 복사하여 스타일시트에 붙여넣으세요.

예제

• 삼각형 핸들을 50% 0%, 0% 100%, 100% 100%로 드래그하면 clip-path: polygon(50.0% 0.0%, 0.0% 100.0%, 100.0% 100.0%)을 생성합니다.
• 직사각형의 오른쪽 가장자리에 점을 추가하고 바깥쪽으로 당기면 실시간으로 화살표 모양이 생성됩니다.