弯曲的div与透明顶部

Question

我正在尝试使用边框创建大约500px的透明div全宽和高度，但是我在创建这种弯曲形状时遇到了麻烦。 它应该看起来像示例图像，黄色的形状。

.transparent_bg {
    width: 100%; 
    height: 485px;  
    background: transparent;
    border:solid 5px #000;
    border-color:#000 transparent transparent transparent;
    border-radius: 50%/200px 200px 0 0;
    transform: rotate(180deg);
    position: relative;
    overflow:hidden;
}

.transparent_bg:after {
    content: "";
    width: 100%;
    height: 485px;
    position: absolute;
    top: 0;
    background: red;
}

<div class="transparent_bg"></div>

直到现在，我已经包含了我的工作链接，但没有成功。

Answer 1

您可以以两种方式使用剪辑路径（在顶部元素或底部元素上），只需将顶部和底部设置为叠加，如下所示：

.first,
.second {
  display: inline-block;
  margin: 5px;
}

.first .top {
  -webkit-clip-path: circle(72.9% at 50% 27%);
  clip-path: circle(72.9% at 50% 27%);
  height: 200px;
  width: 200px;
  background-image: url(https://lorempixel.com/800/600/);
  position: relative;
  z-index: 99;
}

.first .bottom {
  margin-top: -70px;
  background: yellow;
  height: 100px;
  width: 200px;
}

.second .top {
  height: 200px;
  width: 200px;
  background-image: url(https://lorempixel.com/800/400/);
  position: relative;
  z-index: -9;
}

.second .bottom {
-webkit-clip-path: polygon(0 25%, 14% 41%, 28% 51%, 49% 54%, 66% 53%, 79% 48%, 89% 39%, 100% 27%, 100% 100%, 47% 100%, 0% 100%);
clip-path: polygon(0 25%, 14% 41%, 28% 51%, 49% 54%, 66% 53%, 79% 48%, 89% 39%, 100% 27%, 100% 100%, 47% 100%, 0% 100%);
  margin-top: -70px;
  background: yellow;
  height: 100px;
  width: 200px;
}

<div class="first">
  <div class="top">
  </div>
  <div class="bottom">
  </div>
</div>

<div class="second">
  <div class="top">
  </div>
  <div class="bottom">
  </div>
</div>

以下是生成路径的有用链接：

https://bennettfeely.com/clippy/

这是使用radial-gradient

的另一个想法

.first  {
  height: 200px;
  width: 400px;
  background: 
    radial-gradient(ellipse at top, transparent 60%, yellow 61%) top/120% 100%, 
    url(https://lorempixel.com/800/600/);
  
}

<div class="first">
  
</div>

Answer 2

＆＃13;

＆＃13;

.transparent_bg {
    width: 100%; 
    height: 485px;  
    background: transparent;
    border-top-left-radius: 50% 50%;
    border-top-right-radius: 50% 50%;
    transform: rotate(180deg);
    position: relative;
    overflow:hidden;
}

.transparent_bg:after {
    content: "";
    width: 100%;
    height: 485px;
    position: absolute;
    top: 0;
    background: red;
}

＆＃13;

<div class="transparent_bg"></div>

＆＃13;

＆＃13;

＆＃13;