Clip Path 생성기
요소를 화살표, 별, 육각형 또는 나만의 폴리곤으로 클립하세요. 캔버스에서 포인트를 드래그하고 clip-path 코드를 복사합니다.
포인트 드래그로 변형 · 캔버스 더블클릭으로 추가
Clip Path 생성기 사용법
- 프리셋 도형을 고르거나 기본 오각형의 포인트를 드래그해 시작하세요.
- 캔버스 아무 곳이나 더블클릭하면 가장 가까운 변에 새 포인트가 삽입됩니다.
- 포인트를 선택하고 「포인트 삭제」를 눌러 제거하세요(최소 3개 유지).
- 원, 타원, 인셋 모드로 전환해 라운드 코너가 있는 파라메트릭 도형을 사용하세요.
- clip-path 선언을 복사하세요. 백분율 좌표로 어떤 크기에서도 도형이 반응형을 유지합니다.
이 Clip Path 생성기에 대해
CSS clip-path 속성은 요소를 기본 도형(폴리곤, 원, 타원, 인셋)으로 클립해 바깥의 모든 것을 숨깁니다. 각진 섹션 디바이더, 육각형 이미지 그리드, 화살표, 말풍선, 별 평점 등 이미지나 SVG 없이 비직사각형 레이아웃을 만드는 표준 방법입니다.
이 에디터로 도형을 시각적으로 디자인하세요: 캔버스에서 폴리곤 꼭짓점을 드래그하고, 더블클릭으로 포인트를 추가하고, 15가지 손으로 조정한 프리셋에서 시작하세요. 모든 좌표는 백분율이라 도형이 요소에 따라 스케일됩니다. 출력에는 구형 Safari용 -webkit-clip-path 프리픽스와 유틸리티 우선 프로젝트용 Tailwind 임의값 클래스가 포함됩니다.
Clip Path 자주 묻는 질문
폴리곤 포인트를 추가하거나 제거하려면?
캔버스 아무 곳이나 더블클릭하면 그 지점의 가장 가까운 변에 새 포인트가 삽입됩니다. 제거하려면 포인트를 클릭해 선택하고(빨간색으로 변함) 「포인트 삭제」를 누르세요. 폴리곤은 항상 최소 3개의 포인트를 유지합니다.
clip-path 폴리곤은 어떤 좌표계를 사용하나요?
각 포인트는 요소의 왼쪽 위에서 측정된 x/y 쌍입니다. 이 생성기는 백분율을 사용해 0% 0%가 왼쪽 위, 100% 100%가 오른쪽 아래입니다. 백분율 좌표는 요소에 따라 자동 스케일되어 도형을 반응형으로 유지합니다.
clip-path를 애니메이션할 수 있나요?
네. 시작과 끝 도형이 같은 유형이고 포인트 수가 같다면(폴리곤의 경우) clip-path는 CSS로 애니메이션 가능합니다. 이 도구로 두 상태를 디자인하고 포인트 수를 맞춘 뒤 transition: clip-path .3s로 전환하세요.
clip-path가 자식 요소와 오버플로에 영향을 주나요?
clip-path는 자식, 테두리, 심지어 box-shadow를 포함한 요소 전체를 클립합니다. 도형 바깥의 모든 것은 숨겨지고 클릭도 불가능합니다. 클립된 도형에 섀도가 필요하면 부모 요소에 drop-shadow() 필터를 적용하세요.
clip-path와 SVG clipPath의 차이는?
CSS clip-path 기본 도형(폴리곤, 원, 타원, 인셋)은 한 줄의 코드로 대부분의 레이아웃 요구를 충족하고 애니메이션도 가능합니다. SVG clipPath는 곡선이 있는 복잡한 패스를 지원합니다. 기하학적 디자인은 CSS 도형(이 도구)을, 베지어 곡선이 필요하면 SVG를 사용하세요.