css - 意外的框阴影行为

Question

我试图在 CSS 中绘制一个小三 Angular 形(作为矩形聊天气泡的尾部)。我设法做到了，但后来我想在尾部和盒子上应用盒子阴影。所以，我的尾部有以下 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);
}

渲染这个(抱歉；由于缩放背景有点模糊):

注意盒子阴影如何不沿着气泡尾部的对 Angular 线部分呈现。

我想要达到的效果是:

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

我将如何实现？

谢谢!

---

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

Answer 1

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