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/