<div>
html, body {
  height: 100%;
  background: royalblue;
  margin: 0;
}
div {
  height: 100%;
  background: lightyellow;
  clip-path: polygon(evenodd, 
    50% 0, 0 0, 50% 100%, 100% 0, 50% 0, 0 100%, 100% 100%, 50% 0); 
}
div:hover {
  
  clip-path: polygon(
    50% 0, 0 0, 50% 100%, 100% 0, 50% 0, 0 100%, 100% 100%, 50% 0); 
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.