CSS clip-path

핵심 개념

clip-path는 요소를 원하는 모양으로 잘라냅니다. polygon(x% y%, ...)으로 다각형, circle(반지름 at x y)로 원형, inset(top right bottom left)으로 사각형 클리핑이 가능합니다. 클리핑된 영역 밖은 보이지 않지만 공간은 차지합니다. clip-path를 지우며 원래 사각형으로 돌아가는 것을 확인하십시오.

코드 분석

CSS3📋 코드 (6줄)

<div style='display:flex; gap:20px; padding:24px; background:#0a0a0a; align-items:center; flex-wrap:wrap;'>
  <div style='width:90px; height:90px; background:#10b981; clip-path:polygon(50% 0%,100% 100%,0% 100%);'></div>
  <div style='width:90px; height:90px; background:#cc1111; clip-path:circle(50% at 50% 50%);'></div>
  <div style='width:90px; height:90px; background:#991b1b; clip-path:polygon(0 0,75% 0,100% 50%,75% 100%,0 100%);'></div>
  <div style='width:90px; height:90px; background:#6b0f0f; clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);'></div>
</div>

AI 프롬프트

🤖 AI에게 잘 물어보는 법 — 모델·전략별 프롬프트

Claude

무료: Sonnet 4.6 / Pro $20/mo: Opus 4.6

이 CSS 'CSS clip-path' 코드에서
레이아웃·우선순위·반응형 버그를 찾고
수정 코드와 원인을 단계별로 설명해줘.

ChatGPT

무료: GPT-5.5 / Plus $20/mo: GPT-5.5 Pro

'CSS clip-path'를 사용한 실전 UI 컴포넌트를
3가지 만들어줘. 모바일 반응형까지 포함된 완성 코드로.

Gemini

무료: 2.5 Flash / Pro $19.99/mo: 3.1 Pro

이 CSS 'CSS clip-path' 관련 코드 전체를 분석해서
중복 속성, 미사용 셀렉터, 성능 저하 요소를
우선순위별로 정리해줘.

Grok

무료: Grok 4.1 / SuperGrok $30/mo

'CSS clip-path'가 2026년에도 최선의 방법인지
최신 CSS(컨테이너 쿼리, :has, 서브그리드 등) 기능과 비교해서
솔직히 평가해줘.

⭐ 이것만 기억하세요

CSS clip-path는 이 3가지만 확실히 잡으세요

1.사각형만으로는 표현력에 한계가 있는데, border-radius만으로는 원과 타원 외의 도형을 만들 수 없습니다

2.clip-path는 circle·polygon·inset 등의 함수로 요소를 원·삼각형·다각형 등 원하는 도형으로 잘라냅니다

3.다음 챕터에서 이미지와 요소에 흐림·채도·밝기 효과를 적용하는 CSS filter를 배웁니다

💬 이 챕터 질문 보기

CSS3 · CH.29 — 질문하거나 답변을 확인하세요

→

진행도 29 / 34

← 커리큘럼으로 ← 목록으로 (CSS3)