CSS clip-path란 — 요소를 도형으로 잘라내기

이미지를 굳이 원형이나 육각형으로 미리 잘라 저장할 필요가 없습니다. CSS clip-path 한 줄이면 어떤 요소든 화면에서 보이는 영역을 도형 모양으로 오려낼 수 있습니다. 사진·버튼·섹션 배경 어디에나 적용되며, 원본은 건드리지 않습니다.

clip-path가 하는 일

clip-path는 요소의 보이는 영역(클리핑 영역)을 도형으로 지정하는 속성입니다. 지정한 도형 안쪽만 화면에 그려지고 바깥은 잘려 사라집니다. 중요한 점은 잘려도 요소가 차지하는 자리는 그대로라는 것입니다 — 사각형 박스의 모양만 오려질 뿐, 박스 크기와 주변 레이아웃은 변하지 않습니다. 적용은 한 줄입니다.

예: clip-path: circle(50%); 를 주면 정사각형 사진이 동그란 프로필처럼 보입니다. border-radius로 둥글게 하는 것과 비슷해 보이지만, clip-path는 직선 다각형·비대칭 도형까지 자를 수 있다는 점이 다릅니다.

기본 도형 함수

네 가지 함수만 알면 대부분을 만듭니다.

circle은 circle(반지름 at 중심X 중심Y) 형태로 중심도 옮길 수 있습니다. inset은 위·오른쪽·아래·왼쪽 안쪽 거리를 주고 round로 모서리를 둥글릴 수 있어, 둥근 모서리와 잘라내기를 한 번에 처리합니다.

polygon 좌표 읽기

가장 자유로운 함수가 polygon입니다. 점을 "X% Y%" 형태로 나열하면 그 점들을 순서대로 이어 다각형을 만들고 안쪽만 남깁니다. X는 요소 너비 기준 가로 비율, Y는 높이 기준 세로 비율이라 0% 0%가 왼쪽 위, 100% 100%가 오른쪽 아래입니다.

예를 들어 삼각형은 polygon(50% 0%, 0% 100%, 100% 100%) — 위 가운데, 왼쪽 아래, 오른쪽 아래 세 점입니다. 점 개수를 늘리면 마름모·육각형·말풍선도 됩니다. 손으로 좌표를 외울 필요 없이, 꼭짓점을 마우스로 끌어 값을 뽑아내는 편이 빠릅니다.

활용과 주의점

• 프로필·아바타 — circle/ellipse로 사진을 동그랗게.
• 사선 섹션 — polygon으로 페이지 단면을 비스듬히 잘라 리듬감을.
• 육각형 갤러리·뱃지 — 6점 polygon으로 벌집 격자.
• 말풍선·라벨 — polygon에 꼬리 점 몇 개를 더해.

주의할 점은 두 가지입니다. 잘린 부분 위에 그림자(box-shadow)를 주면 함께 잘려 보이지 않으니, 그림자는 바깥 래퍼 요소에 거는 편이 좋습니다. 또 transition으로 모양을 부드럽게 바꾸려면 시작·끝 polygon의 점 개수가 같아야 보간이 됩니다. 기본 도형 함수는 최신 브라우저에서 모두 동작하지만, 아주 오래된 환경은 무시하므로 핵심 UI에는 대체 모양을 생각해 두세요.