디자인 아틀라스
EN
✦ 시각 효과

clip-path 도형 모핑

clip-path shape morphing

circle()·ellipse()·polygon()·inset() 네 가지 기본 도형 함수로 요소를 자르는 clip-path. 최신 브라우저는 서로 다른 함수끼리도 부드럽게 전환(모핑)합니다.

다른 이름: circle()ellipse()polygon()inset()
···
html
<div class="wrap"><div class="photo" id="photo"></div><div class="label" id="l">clip-path: circle()</div></div>
css
.wrap{position:relative;display:grid;place-items:center;gap:16px}
.photo{width:min(70vmin,280px);aspect-ratio:4/3;transition:clip-path .8s cubic-bezier(.4,0,.2,1);
  background:linear-gradient(135deg,#ff5c8a,#5b5bf7 55%,#18c29c)}
.label{font:600 12px/1.4 monospace;color:var(--muted)}
js
const SHAPES = [
  ['circle(38% at 50% 50%)', 'circle()'],
  ['ellipse(45% 30% at 50% 50%)', 'ellipse()'],
  ['polygon(50% 0%,100% 38%,82% 100%,18% 100%,0% 38%)', 'polygon()'],
  ['inset(10% 15% 10% 15% round 18px)', 'inset()'],
];
const photo = document.getElementById('photo');
const l = document.getElementById('l');
let i = 0;
function apply(){ const [css, label] = SHAPES[i]; photo.style.clipPath = css; l.textContent = 'clip-path: ' + label; i = (i + 1) % SHAPES.length; }
apply();
setInterval(apply, 1600);

clip-path 는 요소를 실제로 잘라내거나 리사이즈하지 않고, 지정한 도형 밖의 픽셀만 안 보이게 감춥니다. circle(반지름 at 중심)·ellipse(가로반지름 세로반지름 at 중심)·polygon(점 목록)·inset(위 오른 아래 왼 [round 반지름]) 이 가장 많이 쓰는 네 함수입니다.

예전에는 같은 함수끼리(polygon 대 polygon 등)만 transition 이 가능했지만, 요즘 브라우저는 모든 basic-shape 함수를 내부적으로 공통 경로 표현으로 바꿔서 비교하기 때문에 circle() 에서 polygon() 으로 바로 transition 을 걸어도 자연스럽게 모핑됩니다. 데모가 이걸 보여줍니다 — 네 함수를 그대로 순환시키기만 했는데 서로 부드럽게 이어집니다.

clip-path 도 filter·transform·opacity<1 과 마찬가지로 새 스태킹 컨텍스트(크로미움에서는 별도 컴포지팅 레이어까지)를 만들어서, 애니메이션되는 요소가 많으면 그만큼 쌓입니다. 그리고 잘려나간 영역은 기본적으로 클릭도 막힌다고 오해하기 쉬운데, 실제 히트테스트 동작은 스펙으로 보장되지 않으므로 "보이는 도형 안에서만 클릭되게" 하려면 SVG 히트 영역이나 좌표 판별 로직을 따로 둬야 합니다.

언제 쓰나

이미지 리빌·모달 열림·플로팅 액션 버튼의 모양 전환처럼 "도형이 바뀌는" 연출에 씁니다. 클릭 판정을 도형 안으로 제한해야 한다면 별도 로직을 준비하세요.