JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block-wrapper">
<div class="block"></div>  
</div>

CSS

.block-wrapper { 
   filter: drop-shadow(1px 1px 5px rgba(0,0,0,0.2));
}
.block{
    border-radius: 15px;
   -webkit-clip-path: polygon(5% 50%, 0 40%, 0 0, 100% 0, 100% 100%, 0 100%, 0 66%);
  clip-path: polygon(6% 50%, 0 40%, 0 0, 100% 0, 100% 100%, 0 100%, 0 66%);
  width: 250px;
  height: 250px; 
  position: relative;
  transition: background-color .5s ease;
}
.block:after { 
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  right: 2px;
  bottom: 2px;
  -webkit-clip-path: polygon(5% 50%, 0 40%, 0 0, 100% 0, 100% 100%, 0 100%, 0 66%);
  clip-path: polygon(5% 50%, 0 40%, 0 0, 100% 0, 100% 100%, 0 100%, 0 66%);
  background-color: #fff;
  border-radius: 15px; 
 }
.block-wrapper .block:hover { 
  background-color: red; 
}