Pure CSS Shapes Demo by VagrantRadio

Hover over the slider above. The next and previous arrows are pure CSS, no images, one div each and are completely accessible.

The HTML:
<div id="arrowL" class="arrows"><a href="#">next</a></div>
<div id="arrowR" class="arrows"><a href="#">prev</a></div>

The CSS:
#arrowL a{
  width: 0;
  height: 0;
  line-height: 0;
  border-top: 30px solid transparent;
  border-bottom:30px solid transparent;
  border-left: 0;
  border-right: 40px solid #000;
  display:block;/*gives inline element block so text-indent can be used*/
  text-indent:-9999px;/*hides text*/
  position:absolute;
  z-index:9999;
  top:40%;
  left:5px;
}
#arrowR a{
  width: 0;
  height: 0;
  line-height: 0;
  border-top: 30px solid transparent;
  border-bottom:30px solid transparent;
  border-left: 40px solid #000;
  border-right: 0;
  display:block;
  text-indent:-9999px;
  position:absolute;
  z-index:9999;
  top:40%;
  right:5px;
}