Html CSS弯曲图像并添加阴影

我有一个图像，想这样显示：

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

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

我试过了，但我不具备归档这三个需求的CSS技能。（被阴影方向和弯曲卡住）

检查此项

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

---

纯css无法实现此阴影！看看这个@jiff为什么不是这个阴影？谢谢+1谢谢！这是可以合作的。我会在你的答案的顶部工作，看看我是否能得到阴影的梯度。另外，你的影子是长方形的，而不是三角形的，也许这就是@Darren Sweeney评论的意思

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