广告
核心提示：css不规则矩形阴影模拟纸张折页角效果代码样式如下：div class="box"div class="box-bg"/divdiv class="box-content"div class="box-bg-trangle"/div/div/div.box{width: 220px;height: 300px;position: relative;margin:40px auto;}.box-bg{position: abso
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));
}
- 文本链接：https://mbtxw.com/Course/show.php?itemid=175
- 文章来源：模板模板
- 版权声明：除非特别标注，否则均为本站原创文章，转载时请以链接形式注明文章出处。
