SOURCE

<div class="frame">
</div>

.frame {
  position: relative;
  width: 100px;
  height: 100px;
  border: 5px solid #abc;
}

.frame::after {
  opacity: 0;
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  width: 50px;
  height: 25px;
  border-left: 0px solid #f7648a;
  border-bottom: 0px solid #f7648a;
  transform: rotateZ(-45deg);
  transition: all .5s;
}

.frame:hover::after {
  opacity: 1;
  border-left: 10px solid #f7648a;
  border-bottom: 10px solid #f7648a;
}