是否有办法在图像下方创建梯形阴影效果(如图中的图像)?
我只知道创建带边框的梯形。到目前为止我想到的是:
HTML
<div id="trapezoid"></div>
CSS
#trapezoid {
height: 0;
width: 120px;
border-bottom: 80px solid #05ed08;
border-left: 45px solid transparent;
border-right: 45px solid transparent;
padding: 0 8px 0 0;
}
提前致谢。
最佳答案
我创建了一个 jsFiddle这演示了一种方法。本质上:给图像一个阴影,在其上覆盖一个透明的div,隐藏阴影的左、上、右边框。由于这些白色边框,如果您使用复杂的背景,此技巧将不起作用。
.wrapper {
display: inline-block;
position: relative;
overflow: hidden;
margin: 0;
padding: 0;
font-size: 0;
}
.wrapper img {
box-shadow: 0 0 50px black;
margin: 0px 30px 50px 30px;
}
.wrapper .overlay {
position: absolute;
left: 0;
top: 0;
display: inline-block;
width: 100%;
height: 100%;
border-top: 0px solid white;
border-left: 30px solid white;
border-right: 30px solid white;
border-bottom: 50px solid transparent;
box-sizing: border-box;
}
<div class="wrapper">
<img src="/image/eg2RH.jpg" width="400" />
<div class="overlay"></div>
</div>
关于html - 如何在图像下创建梯形阴影?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32002514/