CSS Speech Bubbles

Twitter front-end guy Nicolas Gallagher likes both CSS and speech bubbles enough to want them unadulterated by images and non-semantic markup. The lesson from his many examples is that it all comes down to an :after pseudo element that puts the little triangle in there:

.speechbubble:after {
    content:"";
    position:absolute;
    bottom:-15px; /* value = - border-top-width - border-bottom-width */
    left:50px; /* controls horizontal position */
    border-width:15px 15px 0; /* vary these values to change the angle of the vertex */
    border-style:solid;
    border-color:#f3961c transparent;
    /* reduce the damage in FF3.0 */
    display:block; 
    width:0;
}

More examples on Nicolas’ site.