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