如何在图像下创建梯形阴影？答案

【问题标题】：How to create trapezoid shadow under image?如何在图像下创建梯形阴影？
【发布时间】：2015-08-14 04:54:31
【问题描述】：

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

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

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

提前致谢。

【问题讨论】：

标签： html css shape shadow

【解决方案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>

【讨论】：

这是一个玩弄阴影定位的小提琴。不是真正的“梯形”，而是更符合改变投射阴影的“光源”：jsfiddle.net/5ep343df/1