Como fazer setas/triângulos com CSS
19d atrás
Para fazer um triângulo ou seta com #CSS é preciso um elemento com 3 de suas bordas transparentes e uma com cor. O elemento deve ter altura e largura zerados.
Vamos fazer, primeiro adicione o HTML:
<div class="arrow up"></div>
<div class="arrow down"></div>
<div class="arrow right"></div>
<div class="arrow left"></div>
Agora adicione o CSS para cada seta:
.arrow.up {
border: 10px solid transparent;
border-bottom-color: black;
height: 0;
width: 0;
}
.arrow.down {
border: 10px solid transparent;
border-top-color: black;
height: 0;
width: 0;
}
.arrow.right {
border: 10px solid transparent;
border-left-color: black;
height: 0;
width: 0;
}
.arrow.left {
border: 10px solid transparent;
border-right-color: black;
height: 0;
width: 0;
}
O resultado e o código completo você acompanha a seguir:
Comentários (0)