如何创建漫画式气泡对话框？

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/