半圈背景CSS

Question

我在使用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>

这必须与不同的窗口大小（响应）一起使用。背景也总是100％的宽度。寻求帮助来创建此背景。任何帮助表示赞赏。 预先感谢。

Answer 1

您可以通过以下方式做到这一点：

HTML：

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

CSS：

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