Arrows

by elizabethkmathew

HTML

<div class="control-arrow">
</div>

CSS

.control-arrow {
  position: relative;
  width: 3rem;
  height: 4rem;
}

.control-arrow::before,
.control-arrow::after {
  content: '';
  position: absolute;
  width: 2.5rem;
  height: 0.5rem;
  background-color: #000;
  border-radius: 10px;
}

.control-arrow::before {
  transform: translate(0, 1rem) rotate(145deg);
}

.control-arrow::after {
  transform: translate(0, 2.3rem) rotate(42deg);
}

.control-arrow:hover::before {
  transform: translate(0, 1rem) rotate(140deg);
}

.control-arrow:hover::after {
  transform: translate(0, 2.3rem) rotate(40deg);
}