CSS стрелки

 alexei 25/09/2021 - 10:15

Здесь вы узнаете, как сделать стрелки при помощи CSS.


Стрелка вправо: 

Стрелка влево: 

Стрелка вверх: 

Стрелка вниз: 


Как сделать стрелки на CSS

Шаг 1) Добавляем HTML:


<p>Стрелка вправо: <i class="arrow right"></i></p>
<p>Стрелка влево: <i class="arrow left"></i></p>
<p>Стрелка вверх: <i class="arrow up"></i></p>
<p>Стрелка вниз: <i class="arrow down"></i></p>

Шаг 2) Добавляем CSS:


.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}