CSS 클립 경로 생성기
삼각형, 마름모, 육각형 또는 별에서 시작해 좌표를 백분율로 조정하고 CSS를 복사하세요.
사전 설정을 선택하면 점 목록이 바뀝니다. 자유롭게 편집하려면 사용자 지정 점 유지를 선택하세요.
미리 보기 색상은 복사한 clip-path 선언에 포함되지 않습니다.
한 줄에 점 하나를 X, Y 형식의 0~100 백분율로 입력하세요. 점은 3~12개이며 처음과 마지막 점은 자동으로 연결됩니다.
백분율은 요소의 테두리 상자를 기준으로 합니다. 오목 다각형을 사용할 수 있으며, 교차 경로와 가장자리 렌더링은 브라우저마다 다를 수 있습니다. 오래된 브라우저 지원이 필요하면 대체 모양이나 잘리지 않은 콘텐츠를 사용하세요.
사용 방법
사용 방법
- 다각형 프리셋을 선택하거나 사용자 지정 점을 유지합니다.
- 최대 12개의 X, Y 백분율 점을 편집하고 모양을 확인합니다.
- CSS를 복사해 대상 요소와 브라우저에서 테스트합니다.
편집 가능한 백분율 다각형
삼각형, 마름모, 육각형, 오각별 프리셋으로 시작할 수 있습니다. 사용자 지정 점 유지를 선택하면 목록을 편집합니다. 각 비어 있지 않은 줄에는 0~100의 X, Y가 필요하며 3~12개 점을 받습니다.
렌더링 및 지원 범위
CSS 백분율은 잘라낼 요소의 border box를 기준으로 합니다. 오목 다각형은 유효하지만 자기 교차 채우기와 가장자리 안티앨리어싱은 브라우저마다 다를 수 있습니다. 최신 브라우저는 대체로 지원하지만 구형은 미지원 또는 제한될 수 있습니다. 중요한 콘텐츠를 윤곽에만 의존하지 마세요.
자주 묻는 질문
더 알아보기
백분율은 어떤 상자를 기준으로 하나요?
요소 border box 기준입니다. 자르기 전 50%, 50%는 상자의 중심입니다.
오목하거나 자기 교차하는 모양도 되나요?
오목 다각형은 유효합니다. 자기 교차 경로는 엔진마다 다를 수 있으므로 확인하고 일관성이 중요하면 단순한 모양을 고르세요.
SVG나 이미지로 내보내나요?
아니요. CSS 선언과 로컬 미리보기만 만듭니다. 기존 HTML 요소에 적용하거나 SVG에는 전용 도구를 사용하세요.