Animated clip-path example

Made for kutac.cz/blog

HTML

<div class="arrows">Which way?</div>

CSS

.arrows {
  width: 200px;
  height: 200px;
  padding: 125px;
  font-size: 5rem;
  text-align: center;
  background: aquamarine;
  -webkit-clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%);
  clip-path: polygon(40% 0%, 40% 20%, 100% 20%, 100% 80%, 40% 80%, 40% 100%, 0% 50%); 
  -webkit-transition: -webkit-clip-path .3s ease-in-out;
  transition: clip-path .3s ease-in-out;
  cursor: pointer;
}

.arrows:hover {
  -webkit-clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
  clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}