CSS Clip-path 생성기

이 도구 소개

CSS clip-path 생성기는 삼각형, 화살표, 오각형, 육각형, 별, 셰브론, 원, 타원, 둥근 inset 같은 자주 쓰는 도형의 clip-path 값을 실시간 미리보기와 함께 만들어 줍니다.

사용 방법

1. 목록에서 도형을 고릅니다.
2. 미리보기용 채우기 색을 선택합니다.
3. CSS 복사를 누르고 원하는 요소나 이미지에 clip-path를 적용합니다.

알아두면 좋은 점

• clip-path는 도형 바깥을 모두 숨기므로 이미지 마스크나 SVG 파일이 필요 없습니다.
• polygon()은 퍼센트로 된 x y 좌표 목록을 받으며, 요소 크기에 맞춰 조정됩니다.
• circle(50% at 50% 50%)은 요소를 가운데 원형으로 잘라 냅니다.
• inset()에 round를 붙이면 직사각형 자르기에 둥근 모서리가 더해집니다.
• clip-path 기본 도형은 현재 모든 주요 브라우저에서 지원됩니다.

모든 처리는 브라우저 안에서 이루어집니다. 입력한 내용은 업로드되거나 저장되지 않습니다.

자주 묻는 질문