Как создать трапециевидную тень под изображением?

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>