CSS Clip-Path 생성기

예제 1: 육각형 프로필 썸네일

커뮤니티 배지나 프로필 사진을 육각형으로 자를 때는 ‘육각형’ 프리셋을 누르면 됩니다. 출력 값은 다음과 같습니다.

polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%)

좌표가 퍼센트라서 정사각형 이미지에 적용하면 정육각형보다 가로로 조금 넓어집니다. 꼭짓점이 위아래에 있는 정육각형의 너비:높이는 √3:2(약 0.87:1)이므로, 정육각형이 필요하면 이미지 상자를 이 비율로 맞추세요.

예제 2: 양옆에 홈이 있는 쿠폰

이벤트 페이지의 쿠폰이나 리본처럼 양옆이 안쪽으로 파인 모양입니다. ‘육각형’ 프리셋으로 꼭짓점 6개를 만든 뒤 목록을 다음 값으로 바꿉니다.

.element {
  clip-path: polygon(0% 0%, 100% 0%, 90% 50%, 100% 100%, 0% 100%, 10% 50%);
}

홈의 깊이가 요소 너비의 10%이므로 쿠폰이 넓어지면 홈도 함께 깊어집니다. 깊이를 고정하려면 ‘CSS 값’ 탭에서 calc(100% - 24px)처럼 px을 섞어 쓰면 됩니다.

예제 3: 가로 배너 위의 원

미리보기 비율을 2:1로 두고 ‘원’을 고른 뒤 반경을 50%로 둡니다. 값은 circle(50% at 50% 50%)이지만 점선 원의 지름이 배너 높이보다 큽니다. CSS Shapes Level 1은 반지름 퍼센트를 기준 상자의 방향에 무관한 크기, 즉 대각선을 √2로 나눈 값에 대해 계산합니다. 400 × 200 요소라면:

반지름은 158.11px이고, 원의 위아래는 요소 자체의 경계에서 잘립니다. Chromium에서 document.elementFromPoint()로 확인하면 중심에서 오른쪽 155px 지점은 요소에, 162px 지점은 뒤쪽 body에 닿습니다. 네 변에 맞춰야 한다면 ‘타원’을 쓰세요.

소수점과 방향키로 미세 조정

300px 미리보기에서 삼각형 위쪽 꼭짓점을 오른쪽으로 7px, 아래로 3px 끌면 결과는 다음과 같습니다.

52.33% 1%. 정수로 반올림하지 않고 소수 둘째 자리까지 남깁니다. 키보드로는 50% 0%에서 오른쪽 방향키를 한 번, Shift+아래쪽 방향키를 한 번 누르면 다음 값이 됩니다.

51% 10%. 마우스를 쓰기 어렵거나 시안의 수치에 1% 단위로 맞출 때 유용합니다.

다른 생성기와 비교

2026년 10월 3일, Bing(한국)에서 ‘clip-path 생성기’ 1위인 ToolBada와 Clippy(Bennett Feely), 365工具箱, ZERONOVA LAB을 같은 방법으로 시험했습니다. ToolBada는 텍스트 영역에 꼭짓점을 ‘x% y%’ 형식으로 입력하는 방식이라 소수와 100% 초과 값을 그대로 쓰지만 드래그 핸들이 없습니다. 나머지 세 도구에서는 위쪽 꼭짓점을 오른쪽으로 7px, 아래로 3px 옮기면 52% 1% 또는 53% 1%로 정수 반올림됩니다. 핸들은 Tab으로 선택할 수 없는 div 요소라 키보드로 움직일 수 없습니다.

네 도구 모두 path(), shape(), rect(), xywh(), 기준 상자를 입력할 수 없었습니다. 프리셋은 다른 도구가 더 많아서 Clippy는 27가지 도형, ToolBada는 16가지 도형을 제공하고 이 도구는 5가지입니다. 소수 좌표, 키보드 조작, 직접 쓴 CSS를 내 브라우저로 검증하는 기능이 필요할 때 이 도구를 쓰세요.

‘CSS 값’ 탭

‘CSS 값’ 탭에는 어떤 기본 도형이나 기준 상자든 입력할 수 있습니다. 현재 브라우저의 CSS.supports('clip-path', 값)으로 사용 가능 여부를 판단하고 바로 미리 봅니다. 예제 메뉴에는 path(), shape(), inset(10% round 16px) content-box가 있습니다. path()의 좌표는 CSS 픽셀이라 요소 크기에 따라 늘어나지 않고, shape()는 퍼센트를 쓸 수 있습니다.

기준 상자를 쓰지 않으면 border-box를 기준으로 합니다. CSS Masking 명세에 따라 padding-box, content-box 등으로 바꿀 수 있습니다. ‘기준 상자 표시’를 켜면 미리보기에 12px 테두리와 16px 안쪽 여백이 생기고, border-box·padding-box·content-box 경계가 점선으로 표시되어 도형이 어느 경계를 따르는지 볼 수 있습니다.

url(), var(), env(), 주석, 이스케이프가 들어간 값은 받지 않습니다. 사용하는 페이지에 따라 결과가 달라져 여기의 미리보기를 믿을 수 없기 때문입니다. 괄호나 따옴표가 닫히지 않은 값도 받지 않습니다. Chromium에서 CSS.supports('clip-path', 'polygon(50% 0%, 100% 100%')는 파서가 입력 끝에서 괄호를 닫아 주기 때문에 true를 반환하지만, 같은 문자열을 스타일시트에 붙여 넣으면 규칙이 깨집니다. 입력한 값은 미리보기만 하며 핸들로 바꾸지 않습니다. 값을 받지 않을 때는 상태 줄에 이유와 위치를 알려 줍니다. circle(50%))은 「12번째 문자: 「)」에 맞는 「(」가 없습니다.」, polygon(0 0, 100% 0, 50%)은 「polygon()의 3번째 점에 값이 1개 있습니다.」입니다. 함수 이름의 철자가 틀리면 후보를 알려 줍니다(polgon() → polygon()).

애니메이션과 제한 사항

CSS Shapes 보간 규칙에 따라 두 값은 같은 함수여야 하고, polygon()은 꼭짓점 수와 채우기 규칙도 같아야 합니다. 프리셋의 꼭짓점 수는 마름모 4, 육각형 6, 별 10으로 서로 달라서, 마름모에서 육각형으로의 트랜지션은 중간 모양 없이 바뀝니다. 꼭짓점 수를 맞춘 다음 Cubic Bezier 생성기에서 이징을 고르세요.

• 핸들을 쓰는 모드의 값 범위는 0~100%입니다. 요소 밖에 꼭짓점을 두려면 ‘CSS 값’ 탭에서 입력합니다.
• 인셋의 위아래(또는 좌우) 합이 100%를 넘으면 합이 정확히 100%가 될 때까지 비율대로 줄어들어 면적이 0이 됩니다(아래 예 참고).
• 인셋의 둥글기는 퍼센트 값 하나뿐입니다. 타원형 모서리나 px 단위는 ‘CSS 값’ 탭에서 씁니다.
• MDN 호환성 데이터 8.1.4에 따르면 shape()는 Chrome 135, Firefox 148, Safari 18.4부터, rect()와 xywh()는 Chrome 119, Firefox 122, Safari 17.2부터 쓸 수 있습니다.
• 도형 밖의 box-shadow와 포커스 테두리도 잘립니다. 키보드 사용자를 위해 버튼에 clip-path를 쓸 때는 포커스 표시를 감싸는 요소에 주세요. 도형 밖 영역은 클릭 판정에서도 빠집니다.

예를 들어 400 × 200 요소에서 위 70%, 아래 50%로 설정하면 줄어든 위·아래 오프셋과 남은 높이가 58.33% / 41.67% / 0px이 되어 아무것도 보이지 않습니다.

clip-path 없이 삼각형만 필요하다면 테두리로 그리는 CSS 삼각형 생성기도 있습니다.