如何创建漫画风格的讲话泡泡？

Question

如何设计div看起来像CSS中的连环漫画气泡？

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

有没有办法在纯CSS中执行此操作？

Answer 1

一个简单的例子，你可以调整它以满足你的需要..因为我不能发布没有代码的小提琴：

HTML：

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

CSS：

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;
}

http://jsfiddle.net/6rzDK/