Html 使用css创建气泡语音矩形

我想创建一个类似于语音泡泡的结构，但是有一点定制的结构。我尝试了一些基本的边框宽度技巧。任何建议都会有帮助

---

您可以像绘制形状并将其添加到一起一样对气泡进行语音处理。 研究这些链接以获取更多信息

.box{
宽度：200px；
背景：灰色；
文本对齐：居中；
填充：20px；
位置：相对位置；
边界半径：5px；
}
.三角：以前{
内容：“；
宽度：0px；
高度：0px；
位置：绝对位置；
左边框：10px纯色灰色；
右边框：10px实心透明；
边框顶部：10px纯色灰色；
边框底部：10px实心透明；
右：-20px；
顶部：6px；
}

在此处键入文本