Categorias:

Triângulo em CSS

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>