意外的盒子阴影行为

Question

我试图在CSS中绘制一个小三角形（作为矩形聊天泡泡的尾巴）。我设法做到了这一点，但后来我想对盒子和尾部应用盒子阴影。所以，我有尾巴下面的CSS：

#bubble::after { 
    content: ""; 
    display: block; 
    position: absolute; 
    bottom: -22px; 
    left: 10px; 
    border-width: 22px 0 0 20px; 
    border-style: solid; 
    border-color: #fff transparent; 
    -webkit-box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, .6); 
    box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, .6); 
} 

这使得本（对不起，背景是因为变焦的有点模糊）：

注意如何箱阴影不会沿着气泡尾部的对角线部分呈现。

我想达到理想的效果是：

这是在Photoshop的截图，所以它可能看起来不是浏览器的portview的部分截图有点不同（的阴影应该是更大的，我忘了在缩放路径后更新图层样式）。

我该怎么做到这一点？

谢谢！ P：我很乐于使用栅格图像或SVG，尽管如果我不需要，我宁愿使用栅格图像或SVG。

Answer 1

我认为你正在试图做的是有关这个以前的帖子上SA：CSS Drop Shadow for CSS drawn arrow

Answer 2

恐怕这不适用于CSS。 box-shadow适用于元素的框中，图像仍然是矩形:)

请参阅http://lineandpixel.com/blog/png-shadow以便从另一个受挫用户进行书写。

你必须咬牙切齿，使用光栅图像或SVG。