Início
Loja
Quantas vezes você teve que usar uma imagem para fazer um triângulo, porque não tinha código? (mesmo que nenhuma, só colabora)
Tenho uma notícia para você, CSS tá superando javascript.
Neste post eu trago um simples código de como fazer um triângulo em CSS.
Você pode escolher o lado para usar os triângulos, ou usar todos mesmo.
Se não quiser usar os pseudo elementos (:after, :before), pode alternar para uma DIV ou até mesmo um SPAN, é de sua escolha.
O código HTML é bem simples, era de se esperar.
~ Créditos —
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] - Tutorial, código.
Eu não vejo motivo para ter créditos, só fiz uma versão " resumida " de como usar os códigos e postei aqui.
Tenho uma notícia para você, CSS tá superando javascript.
Neste post eu trago um simples código de como fazer um triângulo em CSS.
- Código:
/**
*** Seta para ESQUERDA
**/
.seta-esquerda:before {
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 10px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-right: 5px solid blue;
}
/**
*** Seta para DIREITA
**/
.seta-direita:before {
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 10px;
width: 0;
height: 0;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid green;
}
/**
*** Seta para CIMA
**/
.seta-cima:before {
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 10px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
/**
*** Seta para BAIXO
**/
.seta-baixo:before {
content: "";
display: inline-block;
vertical-align: middle;
margin-right: 10px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #f00;
}
/**
*** Formatação para o exemplo
**/
a,
span,
i,
div {
font: 14px sans-serif;
display: block;
padding-top: 10px;
}
Você pode escolher o lado para usar os triângulos, ou usar todos mesmo.
Se não quiser usar os pseudo elementos (:after, :before), pode alternar para uma DIV ou até mesmo um SPAN, é de sua escolha.
O código HTML é bem simples, era de se esperar.
- Código:
<a href="#" class="seta-cima">Seta para cima</a>
<span class="seta-baixo">Seta para baixo</span>
<i class="seta-esquerda">Seta para esquerda</i>
<div class="seta-direita">Seta para direita</div>
~ Créditos —
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link] - Tutorial, código.
Eu não vejo motivo para ter créditos, só fiz uma versão " resumida " de como usar os códigos e postei aqui.
