html - 顶部和底部带有曲线的纯 CSS 线

Question

我们可以使用纯 CSS 创建这样的曲线吗：-

我尝试了一些东西，但底部曲线不是那么好。曲线应该与我分享的图片相同

.d-flex{
  display: flex;
}
.box {
width: 50px;
  height: 100px;
  border: solid 5px #000;
  border-color: #000 transparent transparent transparent;
  border-radius: 52%/85px 112px 0 0;
}

.box-left, .box-right {
  border-bottom: 5px solid #000;
  width: 200px;
  height: 100px;
}
.box-left {
  border-bottom-right-radius: 10px;
  margin-right: -6px;
}
.box-right {
  border-bottom-left-radius: 10px;
  margin-left: -6px;
}

<div class="d-flex" style="width: 900px">
  <div class="box-left"></div>
  <div class="box"></div>
  <div class="box-right"></div>
</div>