Really simple triangles working in all major browsers, including IE6+.

HTML

No surprises here. Our HTML is as simple as that.

<div class="arrow_top"></div>
<div class="arrow_right"></div>
<div class="arrow_bottom"></div>
<div class="arrow_right"></div>

CSS

The trick is to create an element with zero width and height. The actual size will be determined by the element’s borders. For example, up arrow has top and bottom borders set as transparent and the left border with a solid colour. Imagine it as drawing an arrow where its pointing corner is our zero dimensions div element.

Examples

Arrow top

.arrow_top {
  width:0;
  height:0;
  border-top:30px solid transparent;
  border-bottom:30px solid transparent;
  border-left:30px solid #ff9600;
}

Arrow right

.arrow_right {
  width:0;
  height:0;
  border-top:30px solid transparent;
  border-bottom:30px solid transparent;
  border-left:30px solid #ff9600;
  margin-bottom:10px;
}

Arrow bottom

.arrow_bottom {
  width:0;
  height:0;
  border-left:30px solid transparent;
  border-right:30px solid transparent;
  border-top:30px solid #ff9600;
  margin-bottom:10px;
}

Arrow left

.arrow_left {
  width:0;
  height:0;
  border-top:30px solid transparent;
  border-bottom:30px solid transparent;
  border-right:30px solid #ff9600;
  margin-bottom:10px;
}

Arrow top with non transparent borders and pointing corner is a 5px / 5px div

.arrow_top_filled {
  width:5px;
  height:5px;
  border-left:30px solid #222;
  border-right:30px solid #222;
  border-bottom:30px solid #ff9600;
  margin-bottom:10px;
}

Arrow top right

.arrow_top_right {
  width:0;
  height:0;
  border-bottom:30px solid transparent;
  border-left:30px solid transparent;
  border-right:30px solid #ff9600;
  margin-bottom:10px;
}