The speech bubble above contains no images. Instead it’s done with creative use of css. First the html:

<div class="box">
  <span>&nbsp;</span>
  <p>Hello world</p>
</div>

The css is where the magic happens:

.box {
  background: #ccc;
  padding: 20px;
  width: 300px;
  position: relative; /* This is the only really important part */
}

.box>span {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  font-size: 0;
  line-height: 1px;
  right: -10px; /* Determines the length of the tail */
  top: 10px;
  border-top: 7px solid transparent; /* Angle of the triangle. */
  border-bottom: 7px solid transparent;
  border-left: 10px solid #ccc; /* The triangle */
}

First the <span> is positioned outside the box, and the size of it made small. This is because we are not interested in the box itself (it will never turn into a triangle), but rather, its left border. To explain, have a look at this:

This is a <div> with width and height of 1px, and 20px borders in different colors. In the example above we are interested in the “green” border. We make it have the same background color as the box itself, and make the other borders transparent (in fact the right border is not even there).

It should be said that ie6 has terrible support for “transparent” as color; but it can be done. The css will then look like this:

.box>span {
  display: block;
  font-size: 0;
  height: 1px;
  width: 1px;
  position: absolute;
  left: -10px;
  top: 10px;
  border-left:10px solid #ccc;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  _border-top-color:cyan; /* No 'transparent' borders in ie6 */
  _border-bottom-color:cyan;
  _filter:chroma(color="cyan"); /* filter out the cyan color */
}

Notice that this uses an ie6 hack. ie6 is the only browser (as far as I know) that ignores the “_”, so it’s very useful for hacks. I generally suggest, however, to just ignore ie6 and start enjoy coding.