UPDATE
HTML
You can make them with a single div. It's nice to have classes for each direction possibility.
<div class="arrow-up"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>
<div class="arrow-right"></div>#CSS
The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for example, the bottom border is colored while the left and right are transparent, which forms the triangle.
.arrow-up {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
}
.arrow-down {
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #f00;
}
.arrow-right {
width: 0;
height: 0;
border-top: 60px solid transparent;
border-bottom: 60px solid transparent;
border-left: 60px solid green;
}
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-right:10px solid blue;
}
Source: https://css-tricks.com/snippets/css/css-triangle/
Another approach:
Adjust the CSS left, top, width and height properties to create a traingular shape. This can also be used a list style bullet.
Simply add class 'div' to any HTML element. Make sure the parent has the CSS property position: relative.
.div::before {
content: '';
display: block;
position: absolute;
z-index: 1;
top: 110px;
left: -15px;
width: 30px;
height: 30px;
background: white;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-box-shadow: 0px 0px 2px #CCC;
box-shadow: 0px 0px 2px #CCC;
}