在移动视图中向背景添加曲线

Question

我正在尝试在移动视图上重新创建这个背景，不确定我是否应该创建形状或者我应该只使用背景图像并称之为一天。

感谢我能得到的任何帮助或见解。

这是我尝试创建形状的 3 个部分，现在这些值有点硬编码，所以如果使用不同的设备，形状可能不一致。

https://codepen.io/2EZHenry/pen/MWqaVXz

<div class="outerdiv"> 
  <div class="container">
    text
  </div>
</div>

.outerdiv {
  height:400px;
  width:200px;
  border:1px solid black;
  display:flex;
  align-items:center;
  justify-content:center
}

.container{
  height:50px;
  width:100%;
  background:blue;
  position:relative;
}

.container::before{
  content: "";
  left: 0;
  height: 180px;
  position: absolute;
  width: 100%;
  bottom: 100%;
  background: blue;
  border-top-right-radius: 100%;
}

.container::after{
  content: "";
  left: 0;
  height: 180px;
  position: absolute;
  width: 100%;
  top: 100%;
  background:blue;
  border-bottom-left-radius: 100%; 
}