Как эти штуки называются и как их лучше всего добавить на страницу?

Question

Хочу сделать выпадающее меню. Сорри за плохое качество

Answer 1

Треугольники можно сделать с помощью border-color:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main {
  display: flex;
}

.dropdown {
  display: flex;
  align-items: center;
  padding: 4px;
}

.triangle {
  border: 5px solid;
  border-color: #000 transparent transparent transparent;
  margin-top: 7px;
  margin-left: 4px;
}

<main>
  <div class="dropdown">
  <span>lorem</span>
  <div class="triangle"></div>
</div>
<div class="dropdown">
  <span>lorem</span>
  <div class="triangle"></div>
</div>
<div class="dropdown">
  <span>lorem</span>
  <div class="triangle"></div>
</div>
</main>

Answer 2

Можете использовать символы, например этот - ▾.
А добавлять как угодно, например, при помощи псевдоэлемента:

.arrow::after {
  content: '▾';
  display: inline;
}

<span class="arrow">Arrow</span>

БЛОГ НА HUSL

Как эти штуки называются и как их лучше всего добавить на страницу?

Ответы (2 шт):