<div class="item"></div>
.item {
  width: 200px;
  height: 200px;
  background: #000;
  clip-path: polygon(0% 50%, 50% 0%, 100% 50%,  30% 80%, 50% 100%);
  &:hover {
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%,  30% 80%, 0% 100%)
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.