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; }
Seta pra baixo
HTML
<span class="baixo"></span>
CSS:
span.baixo{ border-top-color:#000; }
Seta pra esquerda
HTML
<span class="esquerda"></span>
CSS:
span.esquerda{ border-right-color:#000; }
Seta pra direita
HTML
<span class="direita"></span>
CSS:
span.direita{ border-left-color:#000; }
[]s,
Muito interessante, nunca tinha pensado em fazer setas dessa maneira! :)
Pingback: Tropeçando 50 | Rafael Bernard Araujo
No stackoverflow isso rendeu muitos pontos e já foi destaque do dia (na caixa suspensa cinza)!
Como faço pra posicionar esta seta? em alguma parte do navegador?
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.
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
Pingback: Bússola com CSS3 e HTML5