Css 如何创建连环画风格的演讲泡泡？

如何设计一个

div

，使其看起来像CSS中的连环漫画演讲泡泡

这是一张图片，展示了我的意思：

---

在纯CSS中有这样做的方法吗？

一个简单的例子，您可以调整它以满足您的需要。。既然我不能在没有代码的情况下发布小提琴：

HTML:

---

一个简单的例子，您可以调整它以满足您的需要。。既然我不能在没有代码的情况下发布小提琴：

HTML:

---

演讲气球，我相信是你要找的词。看看这个：演讲气球，我相信是你要找的词。看看这个：

<div class="balloon">
    O hai !
    <span class="tip"></span>
</div>

body { background: #000; }
.balloon {
    width: 250px;
    height: 75px;
    padding: 50px;
    background: #fff;
    border-radius: 50px;
    position: relative;
    font-size: 34px;
    text-align: center;
}
.balloon .tip {
    width: 0;
    height: 0;
    position: absolute;
    right: 70px;
    bottom: -20px;
    border: solid 10px;
    border-color: #fff transparent transparent transparent;
}