Como fazer setas/triângulos com CSS

68d 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)