<div></div> 

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

div {
  display: inline-block;
  width: 250px;
  height: 250px;
  background: #212121;
  cursor: pointer;
  clip-path: polygon(0 0, 120% 0, 100% 100%, 0 100%);
  animation: polygons 3s alternate infinite;
}

@keyframes polygons {
  100% {
    clip-path: polygon(0 0, -20% 0, 0 100%, 0 100%);
    background: #DCD2C2;
  }
}