Как правильно использовать созданный в css треугольник?

Мне нужно сделать 4 треугольника в css, я делаю их через border примерно так:

.up-arrow {
    border-color: black transparent;
    border-style: solid;
    border-width: 0px 20px 20px 20px;
    height: 0px;
    width: 0px;
}

Но я не могу понять как правильно с точки оформления их добавлять в html. Единственный вариант, что я знаю, это присвоить класс .up-arrow какому-то тегу и вставить его примерно так

<p class="up-arrow"></p> или <i class="up-arrow"></i>

Много где написано, что нельзя использовать пустые теги + на них ругаются валидаторы. Есть ли какой-то альтернативный, лучший вариант? Стоит ли вообще заморачиваться с этим?