如何使用CSS实现两条斜向弯曲线条效果

我想要使用CSS制作两条斜向曲线。
我预期实现的效果如下：

目前我已实现的效果如下：

我尝试使用border属性实现该效果，目前编写的代码如下：

.bottom-circle {
  width: 45%;
  height: 50px;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  border-left: 2px dashed #c6c6c6;
  border-right: 2px dashed #c6c6c6;
  margin: 0 auto;
}

<div class="bottom-circle"></div>

我已经花费数小时尝试调整但仍未达到预期效果，请问有什么最简单的实现方式吗？

你之前的写法只给元素底部设置了圆角，且仅添加了左右两侧的边框，所以最终呈现的是向下凹陷的底部曲线。最简单的改法不需要修改CSS即可，不用调整原有HTML结构完全不用改：

.bottom-circle {
  position: relative;
  width: 45%;
  height: 50px;
  margin: 0 auto;
}
/* 左侧曲线 */
.bottom-circle::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 50%;
  height: 100%;
  border-top-right-radius: 100px;
  border-top: 2px dashed #c6c6c6;
  border-right: 2px dashed #c6c6c6;
  box-sizing: border-box;
}
/* 右侧曲线 */
.bottom-circle::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 50%;
  height: 100%;
  border-top-left-radius: 100px;
  border-top: 2px dashed #c6c6c6;
  border-left: 2px dashed #c6c6c6;
  box-sizing: border-box;
}

如果需要调整曲线的弧度，直接修改border-radius的数值即可，数值越大曲线弧度越平缓，数值越小弧度越陡峭。如果需要调整两条曲线的间距，修改.bottom-circle的宽度即可。

内容的提问来源于stack exchange，提问作者bateler8