如何在图像下创建梯形阴影?

时间:2015-08-14 04:54:32

标签: html css shape shadow

有没有办法在图像下面创建一个梯形阴影效果,例如图像中的那个?

enter image description here

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

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

提前致谢。

1 个答案:

答案 0 :(得分:2)

我创建了一个jsFiddle,展示了一种方法。本质上:给图像一个阴影,在它上面覆盖一个透明的div,它隐藏阴影的左边,顶部和右边。由于这些白色边框,如果你使用复杂的背景,这个技巧将不起作用。

&#13;
&#13;
.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;
}
&#13;
<div class="wrapper">
    <img src="http://i.stack.imgur.com/eg2RH.jpg" width="400" />
    <div class="overlay"></div>
</div>
&#13;
&#13;
&#13;