Muitas vezes usamos triângulos em links, botões ou qualquer outro elemento que precise de alguma indicação de clique. Esses triângulos, por serem muito simples, é bem possível criarmos inteiramente usando CSS. Esse truque vale muito a pena para evitar que o browser tenha que baixar pequenas imagens, quem mesmo tendo um peso bem leve, elas atrapalham a performance do carregamento do site.
Para esse truque você usará os pseudo elementos :after ou :before.
Abaixo, segue o código:
<a href="#" class="seta-cima">Seta para cima</a> <span class="seta-baixo">Seta para baixo</span> <i class="seta-esquerda">Seta para esquerda</i> <div class="seta-direita">Seta para direita</div>
/** *** Seta para ESQUERDA **/ .seta-esquerda:before { content: ""; display: inline-block; vertical-align: middle; margin-right: 10px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 5px solid blue; } /** *** Seta para DIREITA **/ .seta-direita:before { content: ""; display: inline-block; vertical-align: middle; margin-right: 10px; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid green; } /** *** Seta para CIMA **/ .seta-cima:before { content: ""; display: inline-block; vertical-align: middle; margin-right: 10px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black; } /** *** Seta para BAIXO **/ .seta-baixo:before { content: ""; display: inline-block; vertical-align: middle; margin-right: 10px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #f00; }
Perceba que o que define o tamanho da seta é o tamanho das bordas. A cor também é definida pela borda. Eu usei em um pseudo-elemento, mas você pode muito bem fazer em um span ou qualquer outro elemento vazio. Eu ainda assim sugiro fazer em um pseudo-elemento para evitar elementos inúteis.