01
프리셋 교체 먼저 확인
별이나 화살표를 고르면 현재 점 몇 개를 바꾸는지 미리 봅니다. 적용 후 한 번 되돌릴 수 있어 작업 중이던 윤곽을 보존합니다.
HTML / CSS 도구
CSS 클립패스 생성기점을 움직이며 미리보기
다각형의 점을 움직이거나 기본 도형 값을 조정하고 생성된 CSS를 확인하세요.
CSS 클립패스 생성기
도형 미리보기
CSS 결과
clip-path: polygon(50% 0%, 93.3% 25%, 93.3% 75%, 50% 100%, 6.7% 75%, 6.7% 25%);도형 좌표와 CSS는 브라우저 안에서만 생성됩니다.
CSS를 복사할 수 있습니다.
배지나 이미지 가장자리를 비스듬히 자를 때 polygon 좌표를 숫자만 보고 정하면 결과를 예상하기 어렵습니다. CSS 클립패스 생성기는 점을 직접 움직이며 윤곽을 보여 줍니다.
이 CSS 클립패스 생성기는 원, 타원, inset에도 각각 맞는 입력을 제공합니다. 현재 도형으로 다시 생성한 결과만 복사하도록 해 오래된 CSS를 가져갈 위험을 줄입니다.
CSS 클립패스 생성기를 쓰는 이유
점 좌표와 실제 잘린 모양을 함께 확인할 수 있습니다.
점 하나를 움직여 바로 확인
다각형의 꼭짓점을 끌면 잘린 경계가 즉시 바뀝니다. 숫자 입력으로도 조정할 수 있어 다각형 클립패스 편집기 역할을 합니다.
단위를 바꿔도 형태 유지
같은 점을 백분율 또는 320 × 320 px 상자 기준 픽셀로 표시합니다. clip-path polygon 좌표를 비교해도 미리보기 도형은 움직이지 않습니다.
기존 형태를 잃지 않고 편집하기
02
점과 단위를 다듬기
변 위의 작은 표시를 누르면 중간 점이 추가됩니다. 선택한 점의 X, Y도 입력할 수 있습니다. 반응형 모양에는 %, 고정 크기에는 320 px 기준 값을 쓰세요.
03
새 결과만 내보내기
자동 생성은 편집이 멈춘 뒤 반영됩니다. 끄면 버튼이나 Ctrl/Cmd + Enter를 사용하세요. 결과가 오래된 동안에는 복사와 다운로드가 막힙니다.
도형과 좌표를 다루는 방법
네 가지 CSS 기본 도형
polygon, circle, ellipse, inset을 구분해 편집합니다. 원을 많은 직선 점으로 흉내 내지 않습니다.
다각형 점 증감
변에 중간 점을 추가하고 끌거나 값을 입력합니다. 삭제는 미리 확인하며 최소 세 점을 유지합니다.
되돌릴 수 있는 프리셋
삼각형, 마름모, 육각형, 별, 화살표를 제공합니다. 기존 점을 덮기 전에 변경 내용을 보여 줍니다.
CSS 선언 출력
CSS 도형 생성기로 만든 표준 clip-path 선언을 복사하거나 CSS 파일로 저장할 수 있습니다.
잘림과 좌표의 범위
- 픽셀 좌표는 고정 기준
- 픽셀은 320 × 320 px 상자에서 계산됩니다. 다른 크기의 요소에 같은 비율을 유지하려면 %를 사용하세요. 한 다각형 안에서 단위를 섞지는 않습니다.
- 기본 도형만 생성
- 기존 CSS 문장을 읽어들이거나 path(), shape(), SVG url()을 편집하지 않습니다. 결과 코드는 읽기 전용입니다.
- 배치 크기는 그대로
- clip-path 생성기에서 자른 부분은 화면에서 숨지만 요소의 레이아웃 상자는 유지됩니다. 요소 자체의 box-shadow도 함께 잘릴 수 있습니다.
- 이미지와 애니메이션 제외
- PNG나 SVG 파일, 이미지 업로드, hover 애니메이션은 만들지 않습니다. 다각형 전환에는 양쪽의 점 수가 같아야 합니다.
CSS 클립패스 생성기 자주 묻는 질문
clip-path가 요소의 레이아웃 크기에 영향을 주나요?
아니요. clip-path는 보이는 영역을 바꾸지만 원래 요소의 배치 상자 크기를 다시 계산하지 않습니다.
잘린 도형에 box-shadow가 왜 안 보이나요?
요소 자체에 그린 box-shadow도 클리핑 경계에 잘립니다. 그림자를 유지하려면 바깥 래퍼에 그림자를 적용하세요.
clip-path 도형에 애니메이션이나 전환 효과를 줄 수 있나요?
CSS 전환은 가능하지만 이 도구는 정적 형태 하나만 출력합니다. 다각형 전환의 양쪽 점 수가 같아야 자연스럽습니다.
clip-path를 배경 이미지만 잘라내는 데 쓸 수 있나요?
clip-path는 요소 전체를 자릅니다. 배경 이미지만 다르게 자르려면 배경을 별도 요소나 가상 요소에 두고 그 요소에 clip-path를 적용하세요.
다각형 점의 수에 제한이 있습니까?
점을 추가할 수 있으며 최소 세 점을 남깁니다. 삭제는 미리 보기 후 적용하며 임의의 숨겨진 상한을 두지 않습니다.
도형이나 좌표 문제를 발견하셨나요?
CSS 클립패스 생성기 사용하기
프리셋을 골라 점을 움직이고 잘린 윤곽과 CSS의 일치를 확인해 보세요.
다음에 맞춤형 잘림이 필요할 때 CSS 클립패스 생성기로 좌표를 다시 다듬을 수 있습니다.
브라우저 안에서만 생성됩니다.