Seta com borda colorida

[Good 4]

Acho que desaprendi css, não consegui colorir a borda:

 

#seta {
    border-style: solid;
    border-width: 10px;
    border-color: transparent transparent #FFF transparent;
    width: 0;
    height: 0;

    position: absolute;
    top: -18px;
    left: 5px;
}

 

Me ajudem a colorir as bordas da seta, obrigado

[Andrew Marques 47]

Width:0 e Height:0, resumindo seta não vai aparecer...

 

muda esses valores!

[Good 4]

Coloque o código para rodar, obrigado.. porém é algo não importante eu acho, até porque rodou com ou sem..

 

 

Ajuda..

[William Bruno 1501]

não entendi a dúvida, aqui fez certinho uma seta para a esquerda:

<style type="text/css">
body { background: #000; }
#seta {
    border-style: solid;
    border-width: 10px;
    border-color: transparent #FFF transparent transparent;
    width: 0;
    height: 0;
}
</style>

<div id="seta"></div>

para qual lado vc queria ela ?

[Good 4]

Sim, William o que eu estou querendo é colocar uma borda nessa seta.. Tipo, a seta é branca e eu queria colocar uma borda vermelha (#FF0000) por exemplo..

[Dian Carlos 29]

Bem, você pode usar o :before do CSS3 pra isso.

 

Por exemplo, você tem uma div com 100px de largura e 100px de altura, você quer adicionar uma seta na parte de cima.

 

Ficaria mais ou menos da seguinte forma:

.divpai {
position: relative;

width: 100px;
height: 100px;

background: #FFF;
}

.divpai:before {
content: '';
position: absolute;

top: -10px;
left: 10px;

width: 20px;
height: 20px;

background: #FFF;

-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-khtml-transform: rotate(45deg);
transform: rotate(45deg);

z-index: 0;
}

OBS.: Escrevi aqui sem testar, mas é isso ae..

 

Depois pra colocar as bordas, é só usar um border-left e um border-top.

 

Dá uma olhada nesse site aqui (http://cssarrowplease.com/) pra você ter uma ideia de come funciona.

[William Bruno 1501]

Tipo, a seta é branca e eu queria colocar uma borda vermelha (#FF0000) por exemplo..

a única forma que vejo para fazer isso, seria posicionar o branco por cima de uma outra vermelha maior que a branca.

[Ronaldo Bueno 23]

Cria uma seta igual com borda vermelha e troque com css quando passar o mouse. (Isso se a seta for link para alguma coisa)

 

Se não for, ja tentou:

 

border: 1px solid #ff0000;