CSS弯曲图像并添加阴影

Question

我有一张图片，想要像这样显示：

• 添加边框。
• 弯曲它。
• 添加阴影。

附图显示了它的外观（白色矩形包含原始图像）。

我尝试this answer但我没有CSS技能来存档所有三个要求。 （卡住阴影方向并弯曲）

Answer 1

检查这个

<div class="box effect">
    <h3>Effect</h3>
</div>

的CSS：

.box h3{
    text-align:center;
    position:relative;
    top:80px;
}
.box {
    width:20%;
    height:200px;
    background:#E8C300;
    margin:40px auto;

}


.effect
{
  position: relative;
}
.effect:before, .effect:after
{
      z-index: -1;
    position: absolute;
    content: "";
    bottom: 0;
    left: 10px;
    width: 10px;
    height: 50%;
    max-height: 300px;
    background: rgba(119, 119, 119, 0);
    box-shadow: -14px -1px 7px #777;
    transform: rotate(5deg);
}
.effect:after
{
     transform: rotate(-5deg);
    top: 0px;
    left: 10px;
}

https://jsfiddle.net/84me6p6b/2