<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/