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

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

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

HTML

提前感谢。

我已经创建了一个演示方法的。本质上：给图像一个阴影，在其上覆盖一个透明的div，隐藏阴影的左、上、右边界。由于这些白色边框，如果使用复杂的背景，此技巧将不起作用

.wrapper{
显示：内联块；
位置：相对位置；
溢出：隐藏；
保证金：0；
填充：0；
字号：0；
}
.img{
盒影：0 50像素黑色；
利润率：0px 30px 50px 30px；
}
.wrapper.overlay{
位置：绝对位置；
左：0；
排名：0；
显示：内联块；
宽度：100%；
身高：100%；
边框顶部：0px纯白；
左边框：30px纯白；
右边框：30px纯白；
边框底部：50px实心透明；
框大小：边框框；
}

---

这里有一把小提琴，用来调整阴影的位置。不是真正的“梯形”，而是更符合改变投射阴影的“光源”：

<div id="trapezoid"></div>

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