분류: 개발 도구
CSS Clip-Path 생성기
도형을 고르고 clip-path 값을 복사합니다
원이나 타원부터 육각형, 화살표, 말풍선까지 도형을 고르고, 가장자리에서 얼마나 안쪽으로 들어갈지 조정한 다음, 실시간 미리보기와 함께 완성된 clip-path 값을 복사하세요.
출력
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
이 페이지의 모든 처리는 브라우저에서 이루어집니다. 업로드는 없습니다.
이 도구로 할 수 있는 일
clip-path 다각형을 손으로 작성하려면 각 점의 백분율 위치를 정하고 서로 어떻게 이어지는지 머릿속으로 그려야 하므로, 단순한 삼각형을 넘어서면 반복 작업이 느려집니다. 이 도구는 흔히 쓰는 도형들을 완성된 점 목록으로 미리 준비해 두었고, 어떤 도형이든 모든 점을 중심 쪽으로 같은 방식으로 축소하는 인셋 컨트롤 하나를 제공하므로, 직접 기하학을 계산하지 않고도 쓸 수 있는 clip-path를 미리 보고 복사할 수 있습니다.
사용 방법
- 도형을 고릅니다.
- 인셋을 조정해 박스 안에서 도형을 키우거나 줄입니다.
- clip-path 선언을 복사합니다.
개인정보
이 도구는 전부 브라우저 안에서 동작합니다. 입력한 내용은 업로드되거나 저장되거나 공유되지 않으며, 탭을 닫으면 사라집니다.
자주 묻는 질문
- 원과 타원은 왜 다른 도형과 다르게 동작하나요?
- circle()과 ellipse()는 반지름을 받으므로 이 경우 인셋이 반지름을 직접 줄이는 반면, 다각형 도형들은 모든 점을 같은 비율로 중심 쪽으로 축소합니다.
- clip-path는 레이아웃에 영향을 주나요, 아니면 보이는 부분만 바꾸나요?
- 보이는 부분만 바뀝니다. 요소는 레이아웃을 위한 원래 박스를 그대로 유지하며, clip-path는 도형 바깥 부분을 가릴 뿐입니다. overflow: hidden이 박스 바깥 콘텐츠를 가리는 것과 같은 방식입니다.
- 서버로 전송되는 것이 있나요?
- 없습니다. 도형의 점들은 선택한 도형과 인셋 값으로 페이지에서 계산되며, 그래서 미리보기가 즉시 갱신됩니다.