Simple Triangles with CSS

Recently, I had to create JavaScript-based replacements for 2 Java applets in an application I inherited.  One of the applets was a collapsible hierarchy tree of organizational units that used the conventional triangle icons (pointing right for closed, pointing down for open) to indicate state.

In past applications, I'd simply created actual triangle icons of the appropriate color for this sort of thing, but this time I decided I wanted to do it in pure CSS. 

After a quick search on the web (The Shapes of CSS is a nice resource on this topic) and a bit of trial-and-error, I came up with some CSS triangles that offset nicely from their tree items (and coded a blank triangle for items without children).  They work in all the common modern browsers and in IE as far back as IE 7:

.arrowNone {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid transparent;
  float:left;
  height: 0; 
  margin-right:5px;
  width: 0; 	
}

.arrowOpen {
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 10px solid #666;
  float:left;
  height: 0; 
  margin-right:5px;
  margin-top:6px;
  width: 0; 
}

.arrowClosed {
  border-bottom: 5px solid transparent;
  border-left: 10px solid #666;
  border-top: 5px solid transparent;
  float:left;
  height: 0; 
  margin-right:5px;
  margin-top:4px;
  width: 0; 
}

Granted, they're not the smoothest of triangles, but they worked well enough for this purpose.