Without any trickyness or workaround involved, it is possible to render speech bubbles with perfect shadows entirely with CSS, using no images whatsoever.

Even better, it degrades gracefully in Internet Explorer 7 and 8!

This is how it looks like in modern browsers (Chrome, Opera, and Firefox):

Rendered in Chrome

In IE8, you lose the shadows and the bubble tips become all robot-y (because IE doesn’t support CSS3’s transform property at all):

Rendered in IE8

Finally in IE7 you lose the tips altogether:

Rendered in IE7

If this graceful degradation is acceptable to you, i.e. whoever wrote your brief understands IE is already going the way of the dodo, here’s the SCSS I built.

It comes with variables o easily adjust it to your use case.

You can play with it in this JSFiddle. Enjoy!

This website is graciously hosted by Github Pages.

It's built using jekyll, markdown, bootstrap, bootstrap-sass, sass, haml plus a hefty dose of love and the benevolent tolerance of my significant other.