<div class="container">
  <div class="content">
    <p>Hover me !</p>
    <svg id="more-arrows">
      <polygon class="arrow-top" points="37.6,27.9 1.8,1.3 3.3,0 37.6,25.3 71.9,0 73.7,1.3 "/>
      <polygon class="arrow-middle" points="37.6,45.8 0.8,18.7 4.4,16.4 37.6,41.2 71.2,16.4 74.5,18.7 "/>
      <polygon class="arrow-bottom" points="37.6,64 0,36.1 5.1,32.8 37.6,56.8 70.4,32.8 75.5,36.1 "/>
    </svg>
  </div>
</div>

/* Markup */
body {
  color: #000;
  margin: 0;
  font-family: "Lucida Console", Monaco, monospace;
}

.container {
  background: PaleGoldenRod  ;
  height: 100vh;
  padding: 20px;
  text-align: center;
}

.content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  
  p {
    margin: 0 0 20px;
  }
  
}

/* Arrow & Hover Animation */
#more-arrows {
  width: 75px;
  height: 65px;
  
  &:hover {
    
    polygon {
      fill: #FFF;
      transition: all .2s ease-out;

      &.arrow-bottom {
        transform: translateY(-18px);
      }

      &.arrow-top {
        transform: translateY(18px);
      }
      
    }
  
  }
  
}

polygon {
  fill: #FFF;
  transition: all .2s ease-out;
    
  &.arrow-middle {
    opacity: 0.75;
  }

  &.arrow-top {
    opacity: 0.5
  }
   
}