css不规则矩形阴影模拟纸张折页角效果
代码样式如下：
<div class="box">
<div class="box-bg"></div>
<div class="box-content">
<div class="box-bg-trangle"></div>
</div>
</div>
.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));
}
