半圆背景CSS

我在用CSS创建背景时遇到了问题，如下图所示。

这是我试过的代码

<style> 
#example1 {
    border: 2px solid red;
    background: green;
    padding-bottom: 50px;
    border-bottom-right-radius: 50%;
    border-bottom-left-radius: 50%;
    background-position: 50% 50%;
    border-top: 0px;

}
</style>

<div id="example1">
<p>test</p>
</div>

#例1{
边框：2倍纯红；
背景：绿色；
填充底部：50px；
边框右下半径：50%；
边界左下半径：50%；
背景位置：50%50%；
边框顶部：0px；
}
试验

这应该是必须与不同的窗口大小（响应）。背景宽度也始终为100%。正在寻求帮助以创建此背景。谢谢你的帮助。

---

提前感谢。

您可以这样做：

HTML:

---

那么，您的代码在哪里？或者您认为我们会为您完成这项工作吗？我们希望您至少尝试为自己编写代码。我建议你做一些，或者通过谷歌，或者通过搜索，尝试一下。如果您仍然有问题，请返回您的代码并解释您尝试了什么。我忘记添加代码了。代码添加。谢谢

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

.container {
  overflow: hidden;
}
.bg {
  width:100%;
  height: 200px;
  border-radius: 0 0 100% 100%;
  background-color: yellow;
  margin-top:-130px;
}