[CSS] clip-path 모양 만들기

clip-path

• none
• url : SVG 요소를 Clipping(조각) 한다.

clip-path shape 값

• circle()

circle(radius at X Y);
clip-path: circle(100px at 20% 20%);

• ellipse()

ellipse(horizontal radius vertical radius at X Y);
clip-path: ellipse(100px 100px at 10% 10%);

• triangle()

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

• polygon()

polygon(시계방향 꼭지점)
clip-path: polygon(좌측 상단, 우측 상단, 우측 하단, 좌측 하단);

• path

path()

• inset

inset(100px 100px);

• 모형 만들어주는 사이트

https://bennettfeely.com/clippy/