clip-path: polygon()은 요소의 보이는 영역을 좌표로 잘라내는 방식입니다.
기본 사각형은 네 꼭짓점 (0 0, 100% 0, 100% 100%, 0 100%)으로 이루어집니다.
이 중 모서리 좌표 하나를 두 개의 좌표로 바꾸면, 그 사이가 직선으로 연결되면서 대각선 컷 모서리가 만들어집니다.
기본 사각형
좌상단 컷
clip-path: polygon(
24px 0,
100% 0,
100% 100%,
0 100%,
0 24px
);
모든 모서리 컷
clip-path: polygon(
24px 0,
calc(100% - 24px) 0,
100% 24px,
100% calc(100% - 24px),
calc(100% - 24px) 100%,
24px 100%,
0 calc(100% - 24px),
0 24px
);
|
