JSFiddle - React, Tailwind, and code Playground

HTML

<div class="block-wrap">
  <div class="block-container">
    <div class="block"></div>
  </div>
</div>

CSS

.block-wrap {
  filter: drop-shadow(1px 1px 5px rgba(0, 0, 0, 0.2));
}

.block-container {
  display: inline-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 {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 246px;
  height: 246px;
  background: #fff;
  border-radius: 15px;
  clip-path: polygon(7% 50%, 0 40%, 0 0, 100% 0, 100% 100%, 0 100%, 0 66%);
}

.block-container:hover {
  background: #000;
}