CSS clip-path 생성기

clip-path는 이미지, 카드, 버튼 같은 요소를 도형 모양으로 잘라 냅니다. 도형 바깥은 배경과 호버 영역까지 모두 숨겨집니다. 이 생성기는 삼각형, 다각형, 별, 십자, 화살표, 쉐브론, 말풍선, circle(), ellipse(), 모서리가 둥근 inset()까지 16가지 기본 도형의 clip-path 값을 비율과 방향을 조절해 만들거나, 직접 그린 다각형을 검사합니다. 미리보기에는 각 꼭짓점에 번호가 붙어 순서를 볼 수 있습니다.

사용 방법

1. 도형을 고릅니다.
2. 도형 값(기울기, 안쪽 반지름, 팔 너비 등), 꼭짓점 수 또는 방향을 조절합니다.
3. 아니면 "직접 그린 다각형"을 고르고 한 줄에 "x y" 꼭짓점 하나씩 입력합니다.
4. CSS를 복사합니다. -webkit- 줄과 표준 줄이 모두 들어 있습니다.

계산식

clip-path: polygon(x₁ y₁, x₂ y₂, …) · circle(r at cx cy) · ellipse(rx ry at cx cy) · inset(d round r)

다각형 좌표는 요소의 왼쪽 위 모서리에서 잰 값으로, x는 너비에 대한 비율, y는 높이에 대한 비율입니다. 정다각형과 별은 같은 간격의 각도로 계산한 뒤 상자를 채우도록 늘립니다.

예시

육각형은 위아래가 평평하고 60° 간격의 꼭짓점 6개를 상자에 맞게 늘린 것으로 polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%)입니다. 정팔각형은 각 모서리를 변의 1 ÷ (2 + √2) = 29.29% 지점에서 자릅니다. 안쪽 반지름 50%의 4각 별은 안쪽 꼭짓점이 50 ± 17.68%, 즉 32.32%와 67.68%에 있습니다.