Clip Path Animation with CSS

<!DOCTYPE html>
<html>

  <head>
    <link rel="stylesheet" href="style.css">
    <script src="script.js"></script>
  </head>

  <body>
    <h1>Clip path Animation</h1>
    <br/>
    <div style="width:300px;height:300px;"></div>
  </body>

</html>

// Code goes here

/* Styles go here */
div{
  background-color:#58a;
  -webkit-clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0  50%);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0  50%);
  transition: 1s;
}

div:hover{
  -webkit-clip-path: polygon(100% 0, 100% 100%, 0 100%, 0  0);
  clip-path: polygon(100% 0, 100% 100%, 0 100%, 0  0);
}