Html CSS语音泡沫边界问题

我正在修改用于创建语音气泡的CSS。CSS源代码是

我正在将气泡的背景更改为白色，并添加橙色边框。我的问题是，我无法得到气泡底部三角形周围的边界来显示。三角形本身应为白色fff，边框为DD4814

下面的屏幕截图和这里的小提琴：。请问有人对合适的CSS有什么想法吗

CSS

HTML

---

我通常是这样做的：

基本上，您需要在第一个元素后面放置另一个稍大的：before或：after元素

.bubble:before {
    border-right: 25px solid hsla(0,0%,0%,.1);
    bottom: -28px;
    right: 22px;
    z-index: 1;
}
.bubble:before {
    border-right: 27px solid #DD4814;
    border-bottom: 27px solid transparent;
    bottom: -29px;
    right: 23px;
    z-index: 0;
}

---

我通常是这样做的：

基本上，您需要在第一个元素后面放置另一个稍大的：before或：after元素

.bubble:before {
    border-right: 25px solid hsla(0,0%,0%,.1);
    bottom: -28px;
    right: 22px;
    z-index: 1;
}
.bubble:before {
    border-right: 27px solid #DD4814;
    border-bottom: 27px solid transparent;
    bottom: -29px;
    right: 23px;
    z-index: 0;
}

这是css代码中的位置

它显示气泡始终放置在固定位置

这是css代码中的位置

---

它显示气泡始终放置在固定位置

纯CSS无法做到这一点。如果你需要边框，你就必须使用箭头的图像。我不同意@BenM。请参阅以下文章：您可以使用：：before和：：after css样式来显示不同的箭头。一个红色，然后一个较小的白色。你不能用纯CSS做到这一点。如果你需要边框，你就必须使用箭头的图像。我不同意@BenM。请参阅以下文章：您可以使用：：before和：：after css样式来显示不同的箭头。一个红色，然后是一个较小的白色。您还可以使用来改善阴影的渲染效果，正如在WebKit中看到的那样，只是为了简单起见。感谢3rror404给出的第一个正确答案，以及CherryFlavourPez给出的一条评论，显示了非常好的阴影效果！为了简单起见，您还可以使用改进阴影的渲染，如WebKit中所示。感谢3rror404给出的第一个正确答案，以及CherryFlavourPez给出的显示非常好的阴影效果的评论！

.bubble:before {
    border-right: 25px solid hsla(0,0%,0%,.1);
    bottom: -28px;
    right: 22px;
    z-index: 1;
}
.bubble:before {
    border-right: 27px solid #DD4814;
    border-bottom: 27px solid transparent;
    bottom: -29px;
    right: 23px;
    z-index: 0;
}

.bubble:before:after {
top: 45px;
left: -14px;
bottom: auto;
border-width: 15px 21px 0 0;
border-color: transparent #ebea85;
}