JSFiddle - React, Tailwind, and code Playground

HTML

<div></div>

<div style="height: 100px; width: 100px;"></div>

<svg width="0" height="0">
  <clipPath id="myPath" clipPathUnits="">
    <path d="M 7.110421 19.999997 C 7.110421 10.651111 23.999999 15.408372 23.999999 1.628825 C 23.999999 -10.618623 23.999999 50.618616 23.999999 38.371168 C 23.999999 27.516997 7.110421 29.348883 7.110421 19.999997 Z"></path>
  </clipPath>
</svg>

CSS

div {
  margin: 30px 60px;
  position: relative;
  max-width: 300px;
  height: 200px;
  background-color: purple;
  border-radius: 10px;
  transition: background-color .3s;
}

div:before {
  content: '';
  display: block;
  background-color: purple;
  position: absolute;
  top: 50%;
  left: -23.5px;
  /* визуальный хак, чтобы не было пустого отступа из-за неточности рендеринга */
  width: 24px;
  height: 40px;
  margin-top: -20px;
  clip-path: url(#myPath);
  transition: background-color .3s;
  /* Чтобы было лучше видно */
  transform: scale(2);
  transform-origin: right center;
}

div:hover,
div:hover:before {
  background: blue;
}