Como fazer triângulos (setas ou arrows) com CSS

Como fazer triângulos (arrows) usando apenas com CSS.

por Diego Eis 18/04/2014 ~ 1 min. / 129 palavras

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:

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.