css不规则矩形阴影模拟纸张折页角

css

```html
 <div class="box">
      <div class="box-bg"></div>
      <div class="box-content">
        <div class="box-bg-trangle"></div>
      </div>
    </div>

```html
  .box{
     width: 220px;
     height: 300px;
      position: relative;
      margin:40px auto;
   }
.box-bg{
  position: absolute;
  z-index: 0;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
 background: linear-gradient(-45deg, transparent 28px, #fff7de 28px );
  filter: drop-shadow( 0px 1px 10px rgba(124, 124, 124, 0.4));

}
.box-content{
  width: 100%;
  height: 100%;
  background-image: url(./1.gif);
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
}
.box-bg-trangle{
  position: absolute;
  bottom: 0;
  right: 0;
  z-index: 3;
  overflow: hidden;
  background: linear-gradient(
    -45deg,
    transparent 50%,
     #fff3cd 50%,
    #ffffffda 100%
  );
  width: 40px;
  height: 40px;
  filter: drop-shadow(-2px -2px 8px rgba(0, 0, 0, 0.08));
}