Nando, só uma coisa: você começou usando ::before, e terminou usando :before. Isso foi intencional? A primeira forma é a conceitualmente correta (uma falha do CSS2.1, corrigida no CSS3), mas não funciona no IE8, então só metade do seu estilo vai ser entendido nele.

Na verdade, não é falha. No CSS 3 foi adicionado o suporte a :: como uma maneira de diferenciar pseudo-elementos de pseudo-seletores. Eu tenho a tendência de sempre usar :, mas ali deve ter sido um deslize. Já arrumei!

Digo falha no aspecto conceitual, já que "before" não é um estado como :hover ou :target.

Sim, um tempo atrás tive que fazer um triangulo usando apenas CSS e cheguei nesse resultado.

É muito mais elegante que usar imagem ou outra solução mirabolante.

:D

Uma pena que o Firefox não "encaixa" corretamente.
http://jsfiddle.net/yurigoy...
shot: http://d.pr/i/FUug

Como assim "não encaixa"? Abri no Safari e está exatamente igual. Se a ideia é deixar os elementos colados, é só remover aquele margin-bottom com 10px.

Não, po. Mas o problema é no Firefox. (=
Vê o shot que vais entender.

Como disse, está renderizando exatamente igual.

https://dl.dropboxuserconte...

uhuh
não tá, não.

http://d.pr/i/1Ozw

Azar de quem usa Firefox 22. vou continuar fazendo coisas com CSS + bordas. :P

muito obrigado. ajudou demais.

Como eu faço para adicionar um 'hover' no 'before' ? no caso aí é um botão de menu dropdown responsivo, quero que quando eu passar encima do botão o efeito hover ative a seta na parte inferior do botão..????
.menu .bt {
font-size:16px;
padding:14px 16px;
background-color:#000;
color:#FFF;
border:none;
outline:none;
margin:0;
text-align:center;
}
.bt:before {border: 10px solid transparent;
border-right-color: #FFF;
content: "";
left: -20px;
position: absolute; margin-left:55px; margin-top:33px; transform:rotate(270deg); z-index:1}