如何用HTML/CSS创建带曲线与不等宽的响应式形状？

当前尝试的实现代码 #

CSS 样式 #

.shape{
    background: #fff;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.16);
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 100%;
    border-radius: 0 20% 0 0;
    transform: skew(160deg);
}

HTML 结构 #

<div class="shape"></div>

现存问题 #

• border-radius生成的曲线位置需要向下微调
• 元素左侧存在空隙需要填补
• 尝试结合border-radius与transform: rotate()的方案未成功

实现限制 #

不考虑使用SVG方案，因为该形状需要响应式适配父元素的宽高，因此希望用纯HTML/CSS实现。

参考用SVG代码 #

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="728.546" height="1135" viewBox="30 30 728.546 1135">
  <defs>
    <filter id="a" x="0" y="0" width="728.546" height="1135" filterUnits="userSpaceOnUse">
      <feOffset dx="4" input="SourceAlpha" />
      <feGaussianBlur stdDeviation="10" result="b" />
      <feFlood flood-opacity="0.161" />
      <feComposite operator="in" in2="b" />
      <feComposite in="SourceGraphic" />
    </filter>
  </defs>
  <g transform="matrix(1, 0, 0, 1, 0, 0)" filter="url(#a)">
    <path d="M1679.813-5095.343H1206.271v1075h473.542s180.8-741.334,194.034-823.15C1890.8-4948.331,1679.813-5095.343,1679.813-5095.343Z" transform="translate(-1180.27 5125.34)" fill="#fff" />
  </g>
</svg>

内容的提问来源于stack exchange，提问作者john