<div class="block">
  <i class="arrow"></i>
</div>
.block {
  background-color: green;
  width: 150px;
  height: 20px;
  position: relative;
}

.arrow {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%) rotate(135deg);
  border: solid white;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
  transition: 0.5s ease;
}

.arrow__active {
  transform: translateY(-50%) rotate(45deg)
}
$(".arrow").click(function() {
  $(this).toggleClass("arrow__active")
})

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js