Html 用CSS创建语音气泡

我试图在不使用图像的情况下创建一个语音泡泡，但与典型的矩形和三角形语音泡泡不同，我的语音泡泡稍微复杂一些。请参见下图：

我已经看过了，似乎这可能是一些很酷的CSS技巧，但我真的不知道从哪里开始。谁能给我指出正确的方向吗

以下是我到目前为止的情况：

语音{
位置：相对位置；
宽度：50px；
高度：50px；
背景：#000；
边界半径：50px；
}
。演辞：在{
内容：“；
显示：块；
位置：绝对位置；
}

我创建了带有椭圆形和三角形的简单示例

。三角形等腰线{
位置：相对位置；
填充：15px；
边缘：1米0 3米；
宽度：50px；
高度：40px；
颜色：#000；
背景#f3961c；
边界半径：50px/40px；
背景：线性梯度（顶部，#f9d835，#f3961c）；
}
/*创建三角形*/
.三角形等腰线：后{
内容：“；
显示：阻止；/*减少FF3.0中的伤害*/
位置：绝对位置；
底部：-15px；
左：5px；
宽度：0；
边框宽度：25px 8px 0 8px；
边框样式：实心；
边框颜色：#f3961c透明；
-ms变换：旋转（35度）；/*IE 9*/
-webkit变换：旋转（35度）；/*铬合金、Safari、Opera*/
变换：旋转（35度）；
}

---

我将创建一个圆形伪元素，只有一面有透明的背景和边框。然后使用

transform

和

position:absolute

手动将其设置到位

您需要根据气泡和尾部的所需大小调整值

z-index:-1

将伪元素隐藏在其父元素下

.bubble{
位置：相对位置；
宽度：50px；
高度：40px；
边界半径：50%；
背景颜色：灰色；
}
泡泡之后{
位置：绝对位置；
宽度：40px；
高度：40px；
底部：-2px；
左-16px；
边界半径：50px；
边框底部：8px纯色灰色；
变换：旋转（-55度）；
z指数：-1；
内容：''；
}

---

父div边界半径为50%，将圆+子div设置为三角形，位置绝对&左侧关闭。从这里开始，在我看来不是一个三角形。。。我会发布到目前为止我所拥有的内容，为什么你不从你的泡泡示例站点中获取CSS，它看起来最像你想要的，然后从那里开始工作？@Shomz我曾经有过这样一个剧本，而且已经来回很多次了。。。我真正要做的是弯曲下面的三角形。三角形是用

前

和

后

伪元素完成的-一个用于创建带有圆形边框的正方形，另一个用于切割前一个正方形的剩余部分（通过在其顶部放置背景色）.非常感谢你的帮助，但让这个问题比底部有三角形的正常语音泡泡更难的是，三角形是弯曲的…@BenCarey好的，明白了，正在研究它