How to create this curved trapezoid with CSS?

Question

How can I create this with CSS?

This is what I have so far:

div {
    -webkit-clip-path: polygon(0 79%, 60% 78%, 78% 100%, 0 100%);
    clip-path: polygon(0 79%, 60% 78%, 78% 100%, 0 100%);
    background:red;
    height:300px;
    width:500px;
    border-radius: 25x;
}

Answer 1

An idea using skew transformation:

.box {
  --r: 20px; /* the radius */
  
  width: 300px;
  height: 50px;
  border-top-left-radius: var(--r);
  position: relative;
  overflow: hidden;
}
.box::before,
.box::after {
  content:"";
  position: absolute;
  background: red;
  transform: skew(40deg); /* adjust this to control the inclination */
  transform-origin: bottom right;
}

.box::before {
  inset: 0 var(--r) 0 0;
  border-top-right-radius: var(--r);
}
.box::after {
  right: .8px;
  bottom: 0;
  width: var(--r); 
  aspect-ratio: 1;
  -webkit-mask: radial-gradient(100% 102% at 100% 0,#0000 97%,#000);
}

<div class=box></div>