CSS clip-path 생성기
clip-path 도형을 시각적으로 만드세요 — 다각형·원·타원·inset을 고르고 꼭짓점을 드래그해 clip-path 코드를 복사하세요. 100% 브라우저에서 처리.
좌표는 퍼센트라 비율에 따라 위치가 달라집니다. 실제로 쓸 비율에서 확인하세요.
미리보기의 핸들을 드래그하거나 아래 좌표를 편집하세요.
-webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
🔒 브라우저에서 생성되며 업로드되지 않습니다.
CSS clip-path로 요소를 원하는 도형으로 자르기
삼각형·육각형·별·오각형·사다리꼴 등 준비된 도형이나 circle()·ellipse()·inset()을 골라 세밀하게 다듬으세요. 다각형은 미리보기에서 각 꼭짓점을 직접 드래그하거나 정확한 x% y% 좌표를 입력할 수 있고, 점을 추가·삭제해 완전한 사용자 지정 도형을 만들 수 있습니다. 도구가 -webkit- 접두사가 포함된 clip-path를 만들어 주므로 CSS에 바로 붙여넣으면 됩니다.
실시간 미리보기는 그라디언트나 체커보드 배경 위에 잘린 도형을 보여주고, 전체 박스의 옅은 외곽선으로 어느 부분이 잘려 나가는지 정확히 확인할 수 있습니다. 모든 처리는 브라우저에서 실행되어 업로드나 회원가입이 없습니다.
자주 묻는 질문
clip-path는 어디에 쓰나요?
clip-path는 요소를 도형 모양으로 잘라 바깥 부분을 숨깁니다. 비스듬한 섹션 구분선, 육각형 아바타, 이미지 마스크, 배지, 리빌 애니메이션 등을 이미지 편집 없이 순수 CSS로 만들 때 사용합니다.
복사한 CSS에 -webkit-clip-path가 왜 들어있나요?
일부 구형 WebKit·사파리는 접두사가 붙은 속성만 인식합니다. 접두사 버전과 표준 clip-path를 같은 값으로 함께 넣으면 추가 비용 없이 브라우저 호환성을 최대한 높일 수 있습니다.
사용자 지정 도형을 만들 수 있나요?
네. 사용자 지정을 고르거나 아무 프리셋에서 시작한 뒤, 미리보기의 핸들을 드래그하거나 x/y 퍼센트를 편집하고 점을 추가·삭제해 원하는 다각형을 그리면 됩니다. 다각형을 그리려면 점이 최소 3개 필요합니다.
퍼센트 값은 무엇을 의미하나요?
좌표는 요소 박스에 대한 퍼센트입니다. 0% 0%는 왼쪽 위 모서리, 100% 100%는 오른쪽 아래 모서리입니다. 도형이 요소 크기에 맞춰 함께 확대·축소되므로 어떤 크기에서도 올바르게 유지됩니다.
만든 결과가 업로드되나요?
아니요. clip-path CSS는 전부 브라우저에서 생성되며 서버로 전송되지 않습니다.