css - 如何创建漫画风格的对话泡泡？

Question

如何div在 CSS 中将 a 设置为看起来像连环漫画的气泡？

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

有没有办法在纯 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/