I generally try to avoid using images or Javascript when I can accomplish good presentation with CSS. In this case, I wanted to apply CSS shapes to make a clever speech bubble.

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.

Similar to the CSS Adjacent Sibling Combinator that I wrote about before, the indirect adjacent combinator is pretty nifty and supported by IE7+, FF2+, Opera 9.5+, Safari 3+, and even Konqueror. It is actually part of the CSS3 spec but it’s surprisingly well supported. Here’s how to use it and what it does:

Using the CSS Indirect Adjacent Combinator

h3 ~ p {
  color: #FFFFFF;
  padding-left: 20px;
  border-left: 3px solid;
}

This would affect each <p> element that is a sibling of a preceding <h3> element. This is different from the Adjacent Sibling Combinator (+) in that it affects all following <p> siblings instead of just the immediate sibling. Let us see an example:

Author’s note: Peter Gasston and I kindly remind readers that the CSS3 spec is far from finished, so note that I mean all of the current (as of June 2008) CSS3 selectors.

It looks like David Baron is working hard on new CSS support for Firefox 3. His latest blog post tells us that he has finished up support for a bunch of CSS3 selectors, available now in the Firefox nightly build:

We now support :nth-child(), :nth-last-child(), :nth-of-type(), and :nth-last-of-type() (see bug report) and :first-of-type, :last-of-type, and :only-of-type (see bug report)