Pode chamar de triângulo ou seta, dependendo do objetivo com a forma geométrica.
Seta para cima
/**
* CSS triângulo/seta
* via https://code.difluir.com/
*/
.arrow-up {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #000;
width: 0;
height: 0;
}
E onde quiser mostrar a seta, usar a div:
<div class="arrow-up"></div>
Seta para baixo
/**
* CSS triângulo/seta
* via https://code.difluir.com/
*/
.arrow-down {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #000;
width: 0;
height: 0;
}
E onde quiser mostrar a seta para baixo, usar a div:
<div class="arrow-down"></div>
Seta para a direita
/**
* CSS triângulo/seta
* via https://code.difluir.com/
*/
.arrow-right {
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #000;
width: 0;
height: 0;
}
Onde quiser mostrar a seta para a direita, usar a div:
<div class="arrow-right"></div>
Seta para a esquerda
/**
* CSS triângulo/seta
* via https://code.difluir.com/
*/
.arrow-left {
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid #000;
width: 0;
height: 0;
}
Onde quiser mostrar a seta para a esquerda, usar a div:
<div class="arrow-left"></div>