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，不过如果不需要的话，我更愿意使用。

我担心仅使用CSS是不可能的<代码>框阴影应用于元素的框，图像仍然是矩形：）

请参阅，以获取另一位沮丧用户的评论

---

您必须咬紧牙关，使用光栅图像或SVG。

恐怕仅使用CSS是不可能的<代码>框阴影应用于元素的框，图像仍然是矩形：）

请参阅，以获取另一位沮丧用户的评论

---

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

我认为你所做的与SA上的这篇文章相关：

我认为你所做的与SA上的这篇文章相关：

我认为你所做的与SA上的这篇文章相关：@billyMoat哦，我看到了那篇文章，但我希望尾巴是直角三角形，因为我有点固执。Hahaha@BillyMoat哦，看看我发现了什么：◥ 及◤. 发布答案，以便我将其标记为已读！：D@withadot. 使用unicode字符的问题在于，它们在不同的浏览器中呈现方式不同。你可能会发现它们的麻烦比它们的价值还多（在这种情况下，当你需要它们排队的时候）。我认为你试图做的与SA上的这篇帖子相关：@billyMoat哦，我看到了那篇帖子，但我希望尾巴是直角三角形，因为我有点固执。Hahaha@BillyMoat哦，看看我发现了什么：◥ 及◤. 发布答案，以便我将其标记为已读！：D@withadot. 使用unicode字符的问题在于，它们在不同的浏览器中呈现方式不同。你可能会发现它们比它们的价值更麻烦（在这种情况下，当你需要它们排队的时候）。使用filter属性。如果webkit只是一个选项，是的，这很好。这取决于你是否对其他浏览器降级为在尾部没有阴影感到满意，技术上是这样的，但只有在webkit中。使用filter属性。如果webkit只是一个选项，是的，这很好。这取决于你是否对其他浏览器感到满意，因为它们的尾部没有阴影