<div></div> 

body {
  text-align: center;
  margin: 30px auto;
}

div {
  display: inline-block;
  width: 250px;
  height: 250px;
  background: orange;
  cursor: pointer;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  animation: polygons 4s alternate infinite;
}

@keyframes polygons {
  25% {
    clip-path: polygon(20% 0%, 100% 38%, 70% 90%, 0% 100%);
    background: pink;
  }
  50% {
    clip-path: polygon(0 46%, 100% 15%, 55% 74%, 0 100%);
    background: orange;
  }
  75% {
    clip-path: polygon(100% 38%, 100% 38%, 66% 100%, 0 53%);
    background: cornflowerblue;
  }
}