Surcape -
Redes Sociais:

Você não está conectado. Conecte-se ou registre-se

Seta em CSS

Mensagem - Página 1 de 1

1 Seta em CSS em Seg Nov 02, 2015 12:26 pm

avatarMembro Ativo
Eai, muitas pessoas utilizam ainda imagem em seus layout, aonde poderiam utilizar apenas umas linhas de códigos. E vou mostrar hoje como fazer uma seta em CSS.

A ideia é uma box com zero largura e altura. A largura e altura reais da seta é determinada pela largura da borda. Em uma seta para cima, por exemplo, o limite inferior é de cor enquanto a esquerda e direita são transparentes, que forma o triângulo/seta.

Source

Spoiler:

.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}

.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}

.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}

.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}

Exemplo
— Para visualizar o exemplo Clique Aqui

Créditos
CSS Tricks
n4zun



Última edição por n4zun em Seg Nov 02, 2015 12:44 pm, editado 1 vez(es)

2 Re: Seta em CSS em Seg Nov 02, 2015 12:27 pm

avatarMembro Ativo
Eu estava a procura disso. Muito obrigado.

3 Re: Seta em CSS em Seg Nov 02, 2015 12:28 pm

avatarParticipativo
Ótimo tutorial, irá ajudar muitos iniciantes em CSS
Até

Obs : Gostei muito de seu avatar, amigo


__________________________________

4 Re: Seta em CSS em Seg Nov 02, 2015 12:48 pm

avatarMembro Ativo
Ótimo tutorial, irei usar em meu site Smile


__________________________________

5 Re: Seta em CSS em Seg Nov 02, 2015 12:50 pm

avatarParticipativo
Adorei, mas um dúvida, no CSS não tem um content: escrevendo as palavras, eu devo fazer por assim <div class="arrow-up">BLALBLLBÁ</div> , assim será?


__________________________________

6 Re: Seta em CSS em Seg Nov 02, 2015 1:01 pm

avatarMembro Ativo
Coiouy escreveu:Adorei, mas um dúvida, no CSS não tem um content: escrevendo as palavras, eu devo fazer por assim <div class="arrow-up">BLALBLLBÁ</div> , assim será?
Sim, não vai ter problemas

7 Re: Seta em CSS em Qua Dez 30, 2015 11:07 pm

avatarTurista
Olá , Poderia disponibilizar o código para colocar no HTML ?

Conteúdo patrocinado

Mensagem - Página 1 de 1

Tópicos similares

Permissão deste fórum:
Você não pode responder aos tópicos neste fórum