ToolPal

CSS Clip Path 생성기

드래그 가능한 핸들로 CSS clip-path 도형을 시각적으로 만드세요. 다각형, 원, 타원 코드를 생성합니다.

도형 프리셋

실시간 미리보기

생성된 CSS

.clipped {
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  -webkit-clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}

점 좌표 (드래그로 조정):

P1: 50.0%, 0.0%
P2: 100.0%, 38.0%
P3: 82.0%, 100.0%
P4: 18.0%, 100.0%
P5: 0.0%, 38.0%

사용 방법

드래그 가능한 핸들로 CSS clip-path 도형을 시각적으로 만드세요. 다각형, 원, 타원 코드를 생성합니다.

  1. 1완성된 clip-path로 시작하려면 도형 프리셋(삼각형, 별, 육각형, 원 등)을 선택하세요.
  2. 2실시간 미리보기에서 흰색 핸들을 드래그하여 다각형 꼭짓점을 변형하세요. clip-path 값이 즉시 업데이트됩니다.
  3. 3'점 추가' 또는 '점 제거'로 다각형 도형의 꼭짓점 수를 변경하세요.
  4. 4색상 선택기로 미리보기 색상을 변경하여 디자인에서 clip-path가 어떻게 보이는지 테스트하세요.
  5. 5원클릭으로 생성된 CSS를 복사하여 스타일시트에 붙여넣으세요.

주요 기능

  • 12개 도형 프리셋 — 삼각형, 별, 오각형, 육각형, 화살표, 원, 타원 등
  • 드래그 가능한 다각형 핸들 — 실시간 미리보기에서 각 꼭짓점을 대화형으로 이동
  • 편집 가능한 clip-path 필드 — 유효한 clip-path 값을 직접 입력하면 미리보기 즉시 업데이트
  • 완전한 브라우저 호환성을 위해 clip-path와 -webkit-clip-path 모두 출력

자주 묻는 질문

더 알아보기