<div class="cp_arrows">
  <a href="#" class="cp_arrowcontainer">
  <div class="cp_arrow"></div>
  <div class="cp_arrow"></div>
  <div class="cp_arrow"></div>
  </a>
</div>

.cp_arrows {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.cp_arrows .cp_arrowcontainer {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 100px;
  height: 100px;
  transform: translate(-50%, -50%);
}
.cp_arrows .cp_arrowcontainer:hover .cp_arrow {
  top: 50%;/*hoverで全てを真ん中に集める*/
}
.cp_arrows .cp_arrowcontainer:hover .cp_arrow:before {
  transform: translate(-50%, -50%) rotate(-45deg);/*hoverで全てを真ん中に集め角度を鋭角に*/
}
.cp_arrows .cp_arrowcontainer:hover .cp_arrow:after {
  transform: translate(-50%, -50%) rotate(45deg);/*hoverで全てを真ん中に集め角度を鋭角に*/
}
.cp_arrows .cp_arrow {
  position: absolute;
  left: 50%;
  transition: all 0.3s ease-in;
}
.cp_arrows .cp_arrow:before,
.cp_arrows .cp_arrow:after {
  position: absolute;
  content: '';
  display: block;
  width: 4px;/*矢印の高さ*/
  height: 50px;/*矢印の横幅*/
  background: #009688;
  border-radius: 10px;/*矢印の色*/
  transform: translate(-50%, -50%) rotate(-60deg);;/*左側の位置と角度*/
  transform-origin: bottom right;/*transformの基点*/
  transition: all 0.3s ease-in;
}
.cp_arrows .cp_arrow:after {
  transform: translate(-50%, -50%) rotate(60deg);/*右側の位置と角度*/
  transform-origin: bottom left;/*transformの基点*/
}
.cp_arrows .cp_arrow:nth-child(1) {/*1つ目の矢印の位置と透明度*/
  top: 30%;
  opacity: 0.3;
}
.cp_arrows .cp_arrow:nth-child(2) {/*2つ目の矢印の位置と透明度*/
  top: 50%;
  opacity: 0.6;
}
.cp_arrows .cp_arrow:nth-child(3) {/*3つ目の矢印の位置と透明度*/
  top: 70%;
  opacity: 1;
}