css - 意外的盒子阴影行为

我试图在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的部分屏幕截图有些不同（阴影应该更大，在缩放路径后我忘记更新图层样式）。

我将如何实现？

谢谢！



附注：我愿意使用光栅图像或SVG，尽管我更愿意在不需要时使用。

最佳答案

我认为您要尝试做的与上一则关于SA的帖子有关：CSS Drop Shadow for CSS drawn arrow

关于css - 意外的盒子阴影行为，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/11614144/