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

comofazertrianguloscss_topo

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

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:

Link para visualização no navegador.

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.

Fonte: Tableless

Postagens Relacionadas