✂️ CSS clip-path 생성기

삼각형·마름모·육각형·별·화살표·원·타원 등 자주 쓰는 도형 프리셋을 클릭해 CSS clip-path 값을 즉시 만들어 줍니다. 컬러 박스나 직접 올린 이미지에 실시간으로 잘림 효과를 미리보고, 값을 직접 수정하거나 그대로 복사할 수 있습니다.

사용 방법

1. 원하는 도형 프리셋 버튼을 눌러 clip-path 모양을 고릅니다.
2. 필요하면 clip-path 값을 직접 수정해 좌표를 세밀하게 조정합니다.
3. 미리보기 이미지를 넣어 실제 사진에 적용된 모습을 확인할 수 있습니다.
4. 완성된 clip-path CSS를 복사해 원하는 요소에 붙여넣습니다.

자주 묻는 질문

clip-path는 어떻게 동작하나요?

요소를 지정한 도형(다각형·원 등) 안쪽만 남기고 바깥은 잘라 보이지 않게 합니다. 실제로 요소를 자르는 것이 아니라 표시 영역만 마스킹하는 것이라, 값을 바꾸면 원래 콘텐츠는 그대로 다시 나타납니다.

polygon 좌표를 직접 바꿀 수 있나요?

네. 값 입력창에서 'polygon(x% y%, …)' 형식으로 각 꼭짓점 좌표를 직접 수정할 수 있습니다. x는 왼쪽에서, y는 위에서부터의 비율(%)입니다. 문법이 잘못되면 잘림 없이 원본이 보이니 안심하고 실험하세요.

모든 브라우저에서 되나요?

polygon·circle·ellipse 같은 기본 도형은 최신 브라우저에서 폭넓게 지원되지만, 렌더링이 기기마다 다를 수 있어 참고용으로 확인 후 적용하세요. 올린 이미지는 서버 전송 없이 브라우저 안에서만 처리됩니다.