개발자 / CSS 도형
CSS Clip Path 생성기: 다각형, 원, 타원 및 Inset
6개의 다각형 프리셋과 드래그 및 키보드로 조정할 수 있는 점을 사용하고, 원·타원·inset을 설정하여 CSS로 잘라냅니다. 그라데이션 또는 로컬 이미지를 미리 보고 퍼센트나 픽셀 CSS를 복사합니다.
CSS Clip Path 생성기: 다각형, 원, 타원 및 Inset: 원본 이미지 파일은 변경하지 않고 미리보기를 선택한 도형에 맞게 잘라 표시합니다. 퍼센트 출력은 요소의 크기를 따릅니다. 픽셀 출력은 기준 너비와 높이를 사용하며, 표시되는 미리보기는 화면에 맞게 크기가 조정됩니다. 서버에 파일을 전혀 업로드하지 않고 브라우저에서 100% 로컬로 실행됩니다.
- 카테고리
- 개발자 도구
- 실행 횟수
- 브라우저에서
- 비용
- 무료 · 가입 불필요
- 사용 가능 여부
- 사용 가능
브라우저에서 전부 실행됩니다
번호가 있는 점을 드래그하거나 화살표 키를 사용하거나 좌표를 입력하십시오. 아래 좌표는 백분율이며, 픽셀 출력에는 기준 크기가 사용됩니다.
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
백분율 도형은 요소에 맞춰 크기가 조정됩니다. 원의 백분율에는 정규화된 대각선을 사용하고, 타원의 백분율에는 너비와 높이를 사용합니다. 픽셀 좌표는 기준 치수에 고정됩니다.
CSS 클리핑
MDN clip-path: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/clip-path 클리핑은 요소의 레이아웃 상자를 변경하지 않고 표시 영역을 변경합니다.
기본 도형 좌표
W3C CSS Shapes Level 1, basic shapes: https://www.w3.org/TR/css-shapes-1/#basic-shapes 다각형 좌표와 타원의 반지름은 참조 상자를 기준으로 계산되며, 원의 백분율은 정규화된 대각선을 사용합니다. 사전 설정 좌표와 그레이디언트는 직접 제작한 아트워크입니다.
사용 방법
- 도형과 프리셋을 선택한 다음 기준 크기를 설정합니다.
- 다각형 점을 드래그하거나 화살표 키를 사용하고 좌표를 직접 수정합니다. 다른 도형은 해당 설정을 조정합니다.
- 퍼센트 또는 픽셀 출력을 선택하고 CSS를 복사합니다.
개인정보 보호 및 제한사항
선택한 이미지 미리보기는 기기에 남습니다. 아무것도 업로드하지 않습니다.
관련 도구
자주 묻는 질문
드래그하지 않고 점을 수정하려면 어떻게 해야 하나요?
번호가 표시된 핸들에 포커스를 둔 다음 화살표 키를 사용하거나, 점 목록에 X와 Y 퍼센트를 입력합니다. 다각형에는 최소 3개의 점이 필요합니다.
자른 이미지를 내보낼 수 있나요?
아니요. HTML 요소에 적용할 CSS를 내보냅니다. 로컬 이미지는 미리보기로만 사용됩니다.
원의 퍼센트는 어떻게 측정하나요?
CSS는 정규화된 대각선 sqrt((가로 제곱 + 세로 제곱) / 2)을 원의 반지름 기준으로 사용합니다. 타원의 반지름은 너비와 높이를 각각 사용합니다.
무료 도구 · 브라우저에서회 실행 · 계정 불필요