css图片怎么画出曲形

请问怎么把一个图片 做成类似下面这种弧度 图片铺满这个曲形， 或者把一个div做成这样，里面的内容和图片一样铺满曲形

img

img


<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>CSS 凹形矩形示例</title>
  <style>
    /* 自定义样式 */
    .concave-rect {
      width: 200px;
      height: 100px;
      background-color: #f00;
      position: relative;
      overflow: hidden;
    }
    /* 上曲线的样式 */
    .concave-rect:before {
      content: '';
      width: 100%;
      height: 100%;
      background-color: #fff;
      border-radius: 50%;
      box-sizing: border-box;
      position: absolute;
      top: -10px;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
    /* 上曲线的样式 */
    .concave-rect::after {
      content: '';
      width: 100%;
      height: 100%;
      background-color: #fff;
      border-radius: 50%;
      box-sizing: border-box;
      position: absolute;
      bottom: -110px;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%);
    }
  </style>
</head>
<body>
  <div class="concave-rect"></div>
</body>
</html>