CSS clip-path 생성기

다섯 가지 도형 함수

일반 다각형 클립

/* Hexagon */
clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);

/* Rhombus */
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

/* Chevron / arrow pointing right */
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%, 25% 50%);

/* Parallelogram */
clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%);

/* Diagonal slice (modern hero section) */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

히어로 섹션의 대각선은 아마도 가장 널리 쓰이는 기법일 것입니다. SVG를 전혀 쓰지 않고도 섹션에 비스듬한 현대적 느낌을 줍니다.

clip-path 애니메이션

clip-path는 두 상태가 모두 같은 도형 함수를 사용하고 점의 개수가 같을 때에만 애니메이션됩니다. 정점이 4개인 다각형은 정점이 4개인 다른 다각형으로 부드럽게 변형되지만, 정점을 추가하거나 제거하면 보간이 깨집니다.

.card { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
.card:hover { clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%); }

이를 활용하면 등장 효과, 미묘한 호버 변형, 페이지 전환 효과를 만들 수 있습니다.

clip-path와 overflow: hidden 비교

overflow: hidden은 보더 박스 직사각형 기준으로 잘립니다(이 직사각형은 border-radius로 둥글게 만들 수 있습니다). clip-path는 직접 정의한 임의의 형태로 잘리며, 그림자와 윤곽선을 포함한 모든 것을 함께 잘라냅니다. 그림자를 형태 바깥에 그대로 보이게 하고 싶다면 clip-path는 적합하지 않습니다.

filter: drop-shadow()를 쓰면 clip-path 요소에 형태를 따라가는 그림자를 다시 추가할 수 있지만, 처리 속도가 느립니다.

성능

최신 브라우저에서는 clip-path가 GPU로 가속되므로 애니메이션도 부드럽게 처리됩니다. 다만 path()와 정점이 40개 이상인 매우 복잡한 다각형은 일부 브라우저에서 CPU 렌더링으로 전환됩니다.

접근성

clip-path는 보이는 부분만 바꿉니다. 스크린 리더, 키보드 포커스, 포인터 이벤트는 잘린 형태가 아니라 요소의 전체 박스를 따릅니다. 이미지가 별 모양으로 잘려 있어도 대체 텍스트는 정상적으로 읽힙니다. 버튼이 셰브론 모양으로 잘려 있어도 클릭 영역은 보이는 셰브론이 아니라 직사각형 전체입니다. 그래서 겉보기에 빈 공간처럼 보이는 곳을 실수로 클릭할 수 있습니다.

특이한 모양으로 잘린 버튼이라면 요소의 너비와 높이를 빈틈없이 맞춰서 클릭 영역이 보이는 영역과 최대한 일치하도록 설정하세요.