[CSS] clip-path: 잘라내기 속성

 

📌 clip-path

: 요소를 잘라낼(cliping) 영역을 정의한다.

• 구형 브라우저는 clip 인식, 신형 브라우저는 clip-path 인식
  clip은 사용을 권장하지 않는 속성

 

• none
  
• margin-box / border-box / padding-box / content-box: 박스만큼 잘라내는 속성
  
• circle(): 원

circle(<반지름> at <중심 좌표>);
clip-path: circle(50px at 50% 50%);

 

 

• ellipse(): 타원

ellipse(수평 각도 XY at 수직 각도 XY);
clip-path: ellipse(100px 100px at 10% 10%);

 

 

• triangle(): 삼각형

triangle(좌측 상단 XY, 우측 상단 XY, 하단 XY);
clip-path: triangle(10% 10%, 20% 20%, 30% 30%);

 

 

• polygon(): 다각형

polygon(시계방향 꼭지점)
clip-path: polygon(0 0, 100px 0, 100px 100px, 0 100px);

 

 

• inset(): 정사각형

inset(<top> <right> <bottom> <left>);
clip-path: inset(20px 10% auto 20px);

 

• path(): 경로대로 임의의 모양을 잘라냄

path('경로 데이터')

 

 

 

 

clip-path 만드는 사이트

Clippy — CSS clip-path maker

 

---

 

참고

 

clip-path - CSS: Cascading Style Sheets | MDN

 

 

[CSS] clip-path 모양 만들기