CSS繪製形狀與陰影

Question

我需要繪製形狀如下所示的小提琴頁http://jsfiddle.net/wNhjb/824/陰影，但是陰影似乎環繞箱不在身邊的形狀。

#shape { 
    height: 0; 
    width: 200px; 
    border-top: 50px solid blue; 
    border-right: 50px solid transparent; 
    box-shadow: 6px 6px 3px rgb(22,73,134); 
} 

如何使用上面的代碼來獲得正確的結果。

Answer 1

您可以使用「過濾器：下拉陰影（）」來代替。

#shape { 
    height: 0; 
    width: 200px; 
    border-top: 50px solid blue; 
    border-right: 50px solid transparent; 
    //box-shadow: 6px 6px 3px rgb(22,73,134); 
    filter: drop-shadow(6px 6px 3px gray); 
} 

更新fiddle- http://jsfiddle.net/wNhjb/826/