[CSS] clip-path

inset

.clip-path-inset {
	clip-path: inset(30% 10%); /* 상-하단 30%, 좌-우측 10% */
    clip-path: inset(30%); /* 모두 30% */
    clip-path: inset(30% 10% 5%); /* 상단 30%, 좌-우측 10%, 하단 5% */
    clip-path: inset(30% 10% 5% 1%); /* 상단 30%, 우측 10%, 하단 5%, 좌측 1% */
}

inset 은 잘라내기 클립패스입니다. 

 

circle

.clip-path-circle {
	clip-path: circle(30%);
}

circle 은 정원 클립패스로 엘리먼트 중앙을 기준으로 원의 반지름 30% 를 설정한 클립패스 입니다.

 

.clip-path-circle {
	clip-path: circle(50% at 100% 100%);
}

at 을 사용해서 중심점의 위치를 설정할 수 있습니다.

 

ellipse

.clip-path-ellipse {
	clip-path: ellipse(30% 20%);
}

ellipse 는 타원 클립패스로 타원의 가로 / 세로 크기를 설정해주어야 합니다. 중심점은 circle 과 마찬가지로 at 'x' 'y' 를 추가해서 설정할 수 있습니다.

 

polygon

.clip-path-polygon {
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}

polygon 은 다각형 클립패스로 다각형의 꼭지점 x, y 위치 값을 추가해서 표현할 수 있습니다.

 

path

.clip-path-path {
	clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 150 200');
}

패스 그리기 공식대로 자유로운 형태로 클립패스를 그려넣을 수 있습니다.

 

• M 시작점 지정
• L 직선 그리기
• Z 시작점까지 연결하기
• H 수평선 긋기
• V 수직선 긋기
• C 곡선 긋기
• S 곡선 이어긋기
• Q 2차원 베지어 곡선 긋기
• T 2차원 베지어 곡선 이어긋기
• A 호 그리기 

 

 

---

 

 

참고

🔗 https://developer.mozilla.org/ko/docs/Web/CSS/clip-path

clip-path - CSS: Cascading Style Sheets | MDN