翻转并向SVG图形添加​​边距

Question

我想创建此svg grafic，但既不能翻转它，也不能在顶部和底部显示空白。它与上面的部分完全匹配。我对svg很陌生，所以很抱歉这是一个新手问题。

How I want it

What I have

这是我的代码：

<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>