CSS Clip-Path 생성기 — 창의적인 모양 만들기

CSS clip-path를 사용하면 사각형 박스 레이아웃에서 벗어나 독특하고 창의적인 모양을 만들 수 있습니다.

clip-path 형태

• inset(): 안쪽으로 클리핑, 둥근 모서리 지원
• circle(): 원형으로 클리핑
• ellipse(): 타원형으로 클리핑
• polygon(): 다각형 모양
• path(): SVG 경로로 복잡한 모양

인기 있는 클리핑 효과

/* 대각선 섹션 */
clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%);

/* 화살표 */
clip-path: polygon(0 0, 75% 0, 100% 50%, 75% 100%, 0 100%);

/* 원 */
clip-path: circle(50%);

애니메이션과 결합

clip-path는 CSS transition과 animation으로 부드럽게 변형할 수 있습니다. 단, 두 경우 모두 같은 점의 수를 가진 polygon을 사용해야 합니다.