html - 如何在图像下创建梯形阴影？

Question

有没有办法在图像下方创建梯形阴影效果，例如图像中的那个？

我只知道创建带边框的梯形。到目前为止我想出的是:

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;
}

提前致谢。

Answer 1

我创建了一个 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="http://i.stack.imgur.com/eg2RH.jpg" width="400" />
    <div class="overlay"></div>
</div>