Desenhando setas no HTML sem usar imagem (cross browser)

Uma técnica antiga mas ainda pouco explorada nos deixa desenhar setas usando apenas bordas. E o mais interessante de tudo é que funciona até em versões antigas do IE.

Alguns dias atrás eu ví um post muito interssante no NetTuts, falando sobre bordas. Achei genial, acabei postando como fazer circulos no HTML e agora vamos fazer setas sem usar nenhuma imagem.

É simples, precisamos ter um elemento com width e height 0 e declarar a borda do objeto com o tamanho da seta.

Vamos aos códigos:

Faça um <span>

<span class="colorido"></span>

E depois no CSS:

span{
	width:0;
	height:0;
	border:100px solid transparent;
	display:block;
}

Isso deixa um elemento com 200px de altura e largura, sendo 0 de height e 100px de cada borda.

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

O resultado vai ser esse quadrado colorido:

E colocando cor em somente uma borda, dá o efeito da seta. Veja os exemplos:

Seta pra cima

HTML

<span class="cima"></span>

CSS:

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

Resultado:

Seta pra baixo

HTML

<span class="baixo"></span>

CSS:

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

Resultado:

Seta pra esquerda

HTML

<span class="esquerda"></span>

CSS:

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

Resultado:

Seta pra direita

HTML

<span class="direita"></span>

CSS:

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

Resultado:

[]s,

7 thoughts on “Desenhando setas no HTML sem usar imagem (cross browser)

  1. Pingback: Tropeçando 50 | Rafael Bernard Araujo

  2. Muito bom esse método da seta, bem melhor do que fazer 1001 imagens para cada ocasião que for necessário ter uma seta.

    A única coisa ruim é que não da para usar o box-shadow do CSS3, a sombra fica quadrada.

  3. Achei uma solução para colocar uma senha com box-shadow, criar uma div colocar box-shadow nela, rodar 45º usando o CSS3 e posicionar atrás da seta.

    Gambiarra hahaaha

  4. Pingback: Bússola com CSS3 e HTML5

Leave a Reply

Your email address will not be published. Required fields are marked *