I'd do something like this in the xhtml:
Then, apply the "tail" section to the div.balloon (don't include the left and right spacing which you have in your image... make it only as wide as the balloon itself. Also, give a background color to div.balloon equal to the color of the balloon (it will be shown underneath the paragraphs and extra space, where no image is covering). Give a bottom padding, too, which will be equal to the height of the tail image, roughly. Add and subtract to make it prettier.
Then, apply the top corners to the h1, which will be necessary for all balloons. Alternatively, you could simply use paragraphs without an h1, and give it a class of .first (the proper pseudo-selectors would not be parsed correctly in many browsers).
That should work...