ZeroTool Workbench
CSS Clip-Path 생성기
CSS clip-path 도형을 시각적으로 생성. 핸들을 드래그하여 폴리곤·원·타원·인셋을 만들고 실시간 미리보기로 즉시 CSS 복사. 무료 온라인 도구.
사용 방법
- 탭으로 도형 유형을 선택합니다: 폴리곤, 원, 타원, 또는 인셋.
- 폴리곤: 미리보기의 흰색 핸들을 드래그하거나 꼭짓점 목록에 X/Y 값을 직접 입력합니다. 프리셋 버튼(육각형·별·화살표·마름모·삼각형)을 시작점으로 활용하세요.
- 원: 슬라이더로 반경과 중심 위치를 조정합니다.
- 타원: 가로 반경·세로 반경·중심 위치를 독립적으로 설정합니다.
- 인셋: 각 가장자리 오프셋과 선택적 모서리 반경을 설정합니다.
- 색상과 이미지 배경을 전환하며 클리핑 결과를 확인합니다.
- 복사 버튼으로 생성된 CSS를 클립보드에 복사합니다.
생성된 CSS 이해하기
출력은 .element 클래스에 clip-path를 설정합니다. 이 속성은 img·div·가상 요소 등 모든 요소에 직접 적용할 수 있습니다. 모든 좌표는 요소 자체의 너비와 높이에 대한 퍼센트로 표현되므로 요소 크기 변경 시 도형이 올바르게 스케일됩니다.
주요 활용 사례
CSS clip-path는 비직사각형 이미지 크롭, 대각선 섹션 구분선, 장식적인 히어로 도형, 도형 나타내기 애니메이션, 아이콘 마스크, 스크롤 트리거 모핑 효과 등에 활용됩니다. 폴리곤 모드는 특히 유연하여 최대 12개 꼭짓점의 볼록·오목 다각형을 SVG나 Canvas 없이 표현할 수 있습니다.
FAQ
CSS clip-path란 무엇인가요?
CSS clip-path 속성은 요소를 지정한 도형으로 잘라내어 경계 밖의 내용을 숨깁니다. 지원 도형으로는 polygon()·circle()·ellipse()·inset()이 있습니다. 하드웨어 가속이 적용되며 이미지·div·가상 요소 등 모든 HTML 요소에 적용 가능합니다.
폴리곤 꼭짓점은 어떻게 드래그하나요?
폴리곤 탭으로 전환한 후 미리보기의 흰색 원형 핸들을 드래그하여 꼭짓점을 이동합니다. 오른쪽 꼭짓점 목록에 정확한 퍼센트 값을 직접 입력할 수도 있습니다. '+ 꼭짓점 추가' 버튼으로 추가하고 '×'로 삭제합니다.
polygon()의 퍼센트는 무엇을 의미하나요?
각 꼭짓점은 X%(왼쪽 가장자리로부터의 비율)와 Y%(위쪽 가장자리로부터의 비율)로 표현됩니다. 50% 0%는 상단 중앙, 100% 100%는 오른쪽 하단입니다. 0~100% 범위 밖의 값도 유효하며 요소 경계를 넘어 클리핑됩니다.
inset() 함수는 무엇인가요?
inset()은 각 가장자리로부터의 오프셋(상·우·하·좌)으로 직사각형 클리핑 영역을 정의합니다. 선택적 round 키워드로 클리핑된 사각형의 모서리를 둥글게 만들 수 있습니다. 소프트 엣지 크롭 효과나 시각적 여백이 있는 클리핑에 유용합니다.
clip-path를 CSS 트랜지션으로 애니메이션할 수 있나요?
네, 시작과 끝 값이 같은 도형 함수를 사용하고 꼭짓점 수가 동일하면 가능합니다. 예를 들어 꼭짓점 수가 같은 두 polygon() 값 사이나 두 circle() 값 사이에서 transition: clip-path 0.3s ease를 사용해 부드럽게 애니메이션할 수 있습니다.