Balão feito apenas com CSS

Sabe aqueles balãozinhos de gibis, onde ficam as falas dos personagens? Então, vamos fazer um parecido usando apenas bordas.

Usando as técnicas do border-radius, teremos o resultado esperado.

Clique aqui e veja o exemplo

HTML

<div class="balao">
<div class="pont">
<div class="um"></div>
<div class="dois"></div>
</div>
<div class="conteeudo">
<p>Quer tentar algo novo?</p>
</div>
</div>

Webfont

<link href="http://c-lien.blogspot.com/?aHR0cDovL2ZvbnRzLmdvb2dsZWFwaXMuY29tL2Nzcz9mYW1pbHk9T3BlbitTYW5z" rel='stylesheet' type='text/css'/>

CSS

.balao {
width:300px;
color:#efefef;
background: #ffffff;
}

.balao .pont {
height:15px;
background:#393939;
}

.balao .pont .um {
height:100%;
background:#ffffff;
width:50%;
-moz-border-radius-bottomright: 14px;
-webkit-border-bottom-right-radius:14px;
-o-border-radius-bottomright: 14px;
border-radius-bottomright: 14px;
float:left;
}

.balao .pont .dois {
height:100%;
background:#ffffff;
width:50%;
float:right;
-moz-border-radius-bottomleft: 14px;
-webkit-border-bottom-left-radius:14px;
-o-border-bottom-left-radius:14px;
border-bottom-left-radius:14px;
}

.balao .conteeudo {
padding:5px;
-moz-border-radius: 10px;
-webkit-border-radius:10px;
-o-border-radius: 10px;
border-radius: 10px;
background:#393939;
text-align:center;
font-size:21px;
font-family:'Open Sans' ,Arial, Thoma;
text-shadow:0 0 3px #FFF;
box-shadow:2px 2px 2px gray;
}

Repare no border-radius, eles é que dão a "ponta" o balão.