[해피CGI][cgimall] 박스의 모서리를 대각선으로 깍는 css

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
);