弯曲的div与透明顶部

时间:2017-12-06 10:17:16

标签: html css css3

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

.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>

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

2 个答案:

答案 0 :(得分: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>

答案 1 :(得分:0)

&#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;