JSFiddle - React, Tailwind, and code Playground

HTML

<section>
  <div class="mask">
    <span></span>
  </div>
</section>

CSS

section {
  background-color: palevioletred;
  height: 250px;
  width: 500px;
}

.mask {
  -webkit-mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='238' height='272' viewBox='0 0 238 272'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M238 0H0a690 690 0 0 0 56 272h182V0z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='238' height='272' viewBox='0 0 238 272'%3E%3Cpath fill='%23000' fill-rule='evenodd' d='M238 0H0a690 690 0 0 0 56 272h182V0z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: cover;
          mask-size: cover;

  height: 250px;
  width: 500px;
}

span {
  background-color: palegreen;
  display: block;
  height: 100%;
  width: 100%;
}