CSS3 말풍선~!

/* Bubble with an isoceles triangle

------------------------------------------ */

.triangle-isosceles {

   position:relative;

   padding:15px;

   margin:1em 0 3em;

   color:#000;

   background:#f3961c;

   /* css3 */

   -moz-border-radius:10px;

   -webkit-border-radius:10px;

   border-radius:10px;

   background:-moz-linear-gradient(top, #f9d835, #f3961c);

   background:linear-gradient(top, #f9d835, #f3961c);

}

/* creates triangle */

.triangle-isosceles:after {

   content:"\00a0";

   display:block; /* reduce the damage in FF3.0 */

   position:absolute;

   z-index:-1;

   bottom:-30px;

   left:50px;

   width:0;

   height:0;

   border-width:15px 15px;

   border-style:solid;

   border-color:#f3961c transparent transparent;

}

Support: Firefox 3.5+, Safari 4+, Chrome 4+, Opera 10+, IE8+.

원본 출처 : http://nicolasgallagher.com/pure-css-speech-bubbles/