Creating CSS3 Speech Bubbles
Alright folks here is how to create a CSS3 Speech Bubble with a relatively small bit of CSS.
The CSS
.speech_bubble:before { border-color: #7F7F7F transparent; border-style: solid; border-width: 20px 20px 0; content: ""; display: block; left: 28px; position: absolute; top: 100%; width: 0; z-index: 0; } .speech_bubble { background: none repeat scroll 0 0 #FFFFFF; border: 4px solid #7F7F7F; border-radius: 10px 10px 10px 10px; display: inline-block; padding: 10px; position: relative; } .speech_bubble:after { /*border-color: #FFFFFF transparent;*/ border-top: 20px solid black; border-top-color: inherit; border-left: 20px solid transparent; border-right: 20px solid transparent; border-style: solid; border-width: 15px 15px 0; bottom: -15px; content: ""; display: block; left: 33px; position: absolute; width: 0; z-index: 1; }
The HTML
Just add an element to the body of the page with the following class.
.speech_bubble
Of course you could use this as a base and take it further, adding a gradient background, some nice typography etc.
Also if your in a pinch and want to see the speech bubble adjust before your eyes, I’d recommend this great free online tool by John Clifford http://www.ilikepixels.co.uk/drop/bubbler/