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
Exemplo
— Para visualizar o exemplo Clique Aqui
Créditos
CSS Tricks
n4zun
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)
