意外的盒子阴影行为

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内部的截图，因此它可能看起来与浏览器端口视图的部分截图有点不同（阴影应该更大，我忘记在缩放路径后更新图层样式）。

我将如何实现这一目标？

谢谢！

---

P.S：我对使用光栅图像或SVG的想法持开放态度，但我更愿意，如果我不需要。

Answer 1

我认为您尝试做的事情与此前关于SA的帖子相关：CSS Drop Shadow for CSS drawn arrow

Answer 2

我担心仅使用CSS是不可能的。 box-shadow适用于元素的框，图像仍为矩形：）

请参阅http://lineandpixel.com/blog/png-shadow，了解其他受挫用户的说明。

你必须咬紧牙关并使用光栅图像或SVG。