CSS 종이 접힌 효과(clip-path) + shadow(filter)

<div class="item-wrap">
  <div class="item">
    
  </div>
</div>

.item-wrap {
	filter: drop-shadow(0 0 17px rgba(195, 197, 192, 0.3));
	position: relative;
    
    .item {
    	height: auto;
        aspect-ratio: 416 / 395;
        background: #fff;
        clip-path: polygon(0 0, 100% 0, 100% 87%, 88% 100%, 0 100%);
        position: relative;
        
        &::before {
          content: '';
          position: absolute;
          right: 0;
          bottom: 0;
          width: 12%;
          height: auto;
          aspect-ratio: 1 / 1;
          background: linear-gradient(135deg, #ddeebd 50%, transparent 50%);
       }
    }
}

아래처럼 .item::before를 border로 삼각형을 만드는 방법도 있는데,

border-bottom: 50px solid transparent;
border-left: 50px solid #ddeebd;

이렇게 하면 box-shadow를 추가했을 때 접힌 부분이 아니라 접히지 않은 사각형에 shadow가 생겨버려서,
background linear-gradient로 색을 반반 나누는 방법을 선택!

잘린모양 그대로 shadow를 주기 위해 div로 한 번 더 감싸서, box-shadow가 아닌 filter의 drop-shadow를 사용했다.
참고한 사이트는: https://css-tricks.com/using-box-shadows-and-clip-path-together/