The problem with obtuse triangles and CSS
Obtuse triangles are slightly more complicated, since you can only create acute and right triangles with the CSS shapes method linked above. Therefore I created two triangles: a positive (black) right triangle, and then a negative (white) triangle to emulate an obtuse triangle.
Any tag combination will work as long as the CSS shape elements are inline elements.
The two key parts of the CSS are the rounded corners (available in major, non-IE browsers) and the arrow that extends from the bubble.
After all this, we have:
I haven’t done so here, but you can can create more interesting elliptical borders with:
Note that Opera uses border-radius and that Safari/Chrome does not support percentages. I know this doesn’t look as pretty in IE, but it’s a neat “progressive enhancement”. This might be a great idea for comments, twitter statuses or sub-headings.
There probably is a clever way to inherit a transparent color from a parent element, but I didn’t really take the time to dig into it. If you have improvements, I’d love to hear them.