Html 如何在我的div上放置一个三角形，使其看起来像一个演讲泡泡？

我为我的评论部分创建了一个简单的div

我想给它一个语音泡泡的外观，在左边有一个三角形或任何其他效果，使它看起来像一个语音泡泡从左边来

我如何在不使用图像的情况下实现这一点

图像

html

<div class='comment'></div>

试试这个

。注释{
左边距：10px；
高度：80px；
显示：内联块；
颜色：白色；
宽度：400px；
边框：1px纯白；
填充：10px；
边界半径：5px；
位置：相对位置；
背景色：#fff；
边框：1px实心#000；
}
.评论：：之前{
内容：“；
位置：绝对位置；
顶部：20px；
左-12px；
保证金：自动；
高度：20px；
宽度：20px；
边框：1px实心#fff；
变换：旋转（45度）；
背景色：#fff；
边框底部：1px实心#000；
左边框：1px实心#000；
}

---

我最喜欢尼古拉斯·加拉赫的作品，看看他的

这是我的作品，不是我自己的作品

/*带等高线三角形的气泡
------------------------------------------ */
.三角形等腰线{
位置：相对位置；
填充：15px；
边缘：1米0 3米；
颜色：#000；
背景#f3961c；
边界半径：10px；
背景：线性梯度（#f9d835，#f3961c）；
}
/*创建三角形*/
.三角形等腰线：后{
内容：“；
显示：阻止；/*减少FF3.0中的伤害*/
位置：绝对位置；
底部：-15px；
左：50px；
宽度：0；
边框宽度：15px 15px 0；
边框样式：实心；
边框颜色：#f3961c透明；
}
这是一个报价。你好，世界。文本在这里。

我希望能帮助您：

。注释{
位置：相对位置；
左边距：50像素；
边缘顶部：50px；
高度：50px；
显示：内联块；
宽度：200px；
填充：10px；
边界半径：5px；
背景：天蓝色；
颜色：#FFF；
}
.comment:之前，.comment:之后{
内容：''；
边界半径：100%；
位置：绝对位置；
宽度：50px；
高度：50px；
z指数：-1；
}
.评论：之后{
背景色：#fff；
底部：-30px；
左：55px；
}
.评论：之前{
背景色：天蓝色；
底部：-20px；
左：70像素；
}

---

你好，世界使用伪代码elements@ChandraShekhar我在寻找更详细的答案：/@ChandraShekhar此外，我真的不知道在这种情况下如何使用伪元素。我看不到图像，你能在其他网站上传图像吗？@ehsan当然。这是：
.comment {
    margin-left: 10px;
    height: 80px;
    display: inline-block;
    color: white;
    width: 400px;
    border: 1px solid white;
    padding: 10px;
    border-radius: 5px;
    overflow: hidden;
}