如何用圆弧向外中心夹住容器底部

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

.container {
  position: relative;
  height: 200px;
  width: 400px;
  background-color: #f2f2f2;
}

.container::before,
.container::after {
  content: "";
  position: absolute;
  bottom: -50px; /* 距离容器底部的距离，可根据需要调整 */
  width: 200px; /* 圆弧的宽度，可根据需要调整 */
  height: 100px; /* 圆弧的高度，可根据需要调整 */
  background-color: #f2f2f2;
  border-radius: 100%; /* 圆弧的半径，可根据需要调整 */
}

.container::before {
  left: -100px; /* 距离容器左侧的距离，可根据需要调整 */
}

.container::after {
  right: -100px; /* 距离容器右侧的距离，可根据需要调整 */
}