Вёрстка: Треугольник стрелка с помощью CSS

Треугольник создаётся стилями для одного элемента или псевдоэлемента DOM. Приём заключается в создании блока с нулевыми размерами и границами. Соседние границы нужно сделать прозрачными, а противоположную нужному направлению стрелки (вершины треугольника) окрасить в нужный цвет.

<div>
	<span class="triangle triangle-up"></span>
	<span class="triangle triangle-down"></span>
	<span class="triangle triangle-left"></span>
	<span class="triangle triangle-right"></span>
</div>

<div class="triangleWrapper"></div>

.triangle{
width: 0; 
height: 0; 
display:inline-block;
border:none;
}
.triangle-up {  
border-left: 10px solid transparent;
border-right: 10px solid transparent;  
border-bottom: 10px solid #d70000;
}
.triangle-down {
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #d70000;
}

.triangle-right {
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid #d70000;
}
.triangle-left {
border-top: 10px solid transparent;
border-bottom: 10px solid transparent; 
border-right:10px solid #d70000; 
}

.triangleWrapper::after{
content:' ';
width: 0; 
height: 0; 
display:block;
border:none;
border-left: 10px solid transparent;
border-right: 10px solid transparent;  
border-bottom: 10px solid #d70000;
}