@Norum

Как сделать длинную стрелку?

Как сделать вот такую длинную стрелку и каким образом сделать увеличение ее длины при наведении?
60f49b597f7e6390980150.jpeg
  • Вопрос задан
  • 86 просмотров
Пригласить эксперта
Ответы на вопрос 2
RomanTRS
@RomanTRS
Можно так:
<div class="block">
  <div class="arrow arrow_to-left"></div>
</div>
<div class="block">
  <div class="arrow"></div>
</div>

.arrow {
  display: flex;
  align-items: center;
  transform-origin: center;
}
.arrow_to-left {
  transform: rotate(180deg);
}
.arrow::before,
.arrow::after {
  content: '';
}
.arrow::after {
  border-left: 5px solid black;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
}
.arrow::before {
  background-color: #000;
  width: 30px;
  height: 2px;
  transition: .3s;
}
.block:hover .arrow::before {
  width: 60px;
}
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы