클립 패스 생성기
CSS clip-path를 시각적으로 디자인합니다.
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);- 핸들을 클릭하고 드래그하여 모양 변경
- 빠른 도형을 위해 프리셋 사용
- 'polygon' 모드로 커스텀 형태 만들기
추천 도구
유용할 수 있는 엄선된 도구
CSS clip-path로 맞춤 도형 잘라내기
소개
CSS clip-path 속성은 이미지를 편집하지 않고도 요소를 맞춤 도형 — 삼각형, 육각형, 화살표, 블롭, 임의의 다각형 — 으로 잘라낼 수 있게 합니다. 추가 파일 없이 비직사각형 디자인을 더하는 강력한 방법이죠. 좌표를 손으로 쓰기가 번거롭기 때문에, 이 clip-path 생성기는 점을 시각적으로 드래그하고 정확한 CSS를 브라우저에서 복사하게 해줍니다.
사용 방법 (단계별)
- 1
도형 선택 또는 그리기
프리셋(삼각형·육각형·원)에서 시작하거나 점을 찍어 맞춤 다각형을 정의합니다.
- 2
점 드래그
실시간 미리보기에서 모서리를 옮겨 도형이 알맞게 보이게 합니다.
- 3
clip-path CSS 복사
생성된 clip-path 값을 요소에 붙여넣어 그 도형으로 잘라냅니다.
작동 원리
도형을 고르거나 그리면, 도구가 clip-path로 이를 정의합니다 — 보통 백분율 좌표의 polygon()이나 circle()·ellipse() 같은 프리셋입니다. 도형 바깥은 모두 투명해져 요소가 윤곽 안에서만 보입니다. 실시간 미리보기에서 점을 드래그하면 도구가 대응하는 clip-path 값을 작성해, 어떤 요소에나 붙여넣게 합니다.
이럴 때 쓰세요
이미지나 섹션을 각지거나 기하학적 도형으로 자를 때. 페이지 섹션 사이 대각선 구분선을 만들 때. 육각형 아바타나 배지를 만들 때. 콜아웃에 화살표나 말풍선 모양을 더할 때. 비직사각형 히어로나 카드를 디자인할 때. 다각형 좌표가 어떻게 보이는 도형에 대응하는지 배울 때.
자주 묻는 질문
잘려나갑니다 — 완전히 투명하고 상호작용하지 않게 되어 클릭이 통과합니다. 요소는 도형 윤곽 안에서만 보이고 반응하며, 바탕 레이아웃 박스는 여전히 원래 공간을 차지합니다.
주의사항
clip-path는 시각적으로 자르지만 요소의 박스는 레이아웃에서 여전히 전체 직사각형 공간을 차지해, 겹침이나 간격 문제가 생길 수 있습니다. 또한 잘린 콘텐츠는 숨겨질 뿐 제거되지 않으니, 민감한 정보를 감추는 데 의존하지 마세요.