Отразить и добавить поля в графике SVG

Question

Я хочу создать этот svg grafic, но не могу ни перевернуть его, ни сделать пустое пространство сверху и снизу. Это просто идеально соответствует разделу выше. Я довольно новичок в svg, поэтому прошу прощения, если это полный вопрос.

Как я этого хочу

Что я имею

Вот мой код:

<div class="container2">
  <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
    <path d="M0,100 C490,200 350,0 1900,00 L500,00 L0,0 Z" style="stroke: none; fill:#21252917;"></path>
  </svg>


.container2 {
  display: inline-block;
  position: relative;
  width: 100%;
  vertical-align: middle;
  overflow: hidden;
}

Answer 1

Вы можете попробовать использовать радиальный градиент, как показано ниже. Это также будет отзывчивым.

.box {
  height:200px;
  padding:20px 0;
  background:
    radial-gradient(200% 200% at 50% 120%,transparent 27.5%,red 28%,red 58%,transparent 58.5%),
    radial-gradient(210% 140% at 50% 120%,transparent 27.5%,red 28%,red 58%,transparent 58.5%);
}


.phone {
  width:150px;
  height:100%;
  border-radius:10px;
  background:grey;
  margin:auto;
}

<div class="box">
  <div class="phone"></div>
</div>

Настройте процентные значения для управления нижней и верхней кривой:

.box {
  --t1:200%;
  --t2:200%;
  --b1:210%;
  --b2:140%;
  height:200px;
  padding:20px 0;
  background:
    radial-gradient(var(--t1) var(--t2) at 50% 120%,transparent 27.5%,red 28%,red 58%,transparent 58.5%),
    radial-gradient(var(--b1) var(--b2) at 50% 120%,transparent 27.5%,red 28%,red 58%,transparent 58.5%);
}


.phone {
  width:150px;
  height:100%;
  border-radius:10px;
  background:grey;
  margin:auto;
}

<div class="box" style="--b1:250%;--b2:120%">
  <div class="phone"></div>
</div>

<div class="box" style="--t1:250%;--t2:180%">
  <div class="phone"></div>
</div>