Arrows without images, only CSS. (Cross Browser) Setas sem usar imagem via CSS. (pt-br)

setas.css

.seta{
	width: 0;
	height: 0;
}

.seta.cima {
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-bottom: 10px solid #aaa;
}
.seta.direita {
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-left: 10px solid #aaa;
}

.seta.baixo {
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #aaa;
}

.seta.esquerda {
	border-top: 10px solid transparent;
	border-bottom: 10px solid transparent;
	border-right:10px solid #aaa;
}

.seta.seta-especifica{
	border:100px solid transparent;
	display:block;
}

.seta.seta-especifica.colorido{
    border-top-color:#f00;
    border-left-color:#ff0;
    border-right-color:#0f0;
    border-bottom-color:#0ff;
}

.seta.seta-especifica.cima{ border-bottom-color:#000; }

.seta.seta-especifica.direita{ border-left-color:#000; }

.seta.seta-especifica.baixo{ border-top-color:#000; }

.seta.seta-especifica.esquerda{ border-right-color:#000; }

setas.html

<!-- adding setas.css -->
<link href="caminho/para/setas.css" rel="stylesheet">

<div class="seta cima"> </div>
<div class="seta direita"> </div>
<div class="seta baixo"> </div>
<div class="seta esquerda"> </div>

<div class="seta seta-especifica colorido"></div>

<div class="seta seta-especifica cima"> </div>
<div class="seta seta-especifica direita"> </div>
<div class="seta seta-especifica baixo"> </div>
<div class="seta seta-especifica esquerda"> </div>

<!-- referencias -->
<!-- http://www.rafaelmarques.com.br/blog/como-fazer-triangulos-com-css/ -->
<!-- http://www.tidbits.com.br/desenhando-setas-no-html-sem-usar-imagem-cross-browser -->