带透明顶部的弧形div [英] curved div with transparent top

问题描述

我正在尝试使用边框在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> 

直到现在，我都包含了指向我工作的链接，但没有成功.

解决方案

您可以以两种方式使用剪切路径(在顶部元素或底部元素上)，只需像这样使顶部和底部覆盖即可:

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

.first .top {
  clip-path: circle(72.9% at 50% 27%);
  height: 200px;
  width: 200px;
  background: url(https://i.picsum.photos/id/10/800/800.jpg) center/cover;
  position: relative;
}

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

.second .top {
  height: 200px;
  width: 200px;
  background:url(https://i.picsum.photos/id/10/800/800.jpg) center/cover;
  position: relative;
}

.second .bottom {
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(100% 100% at top, transparent 60%, yellow 61%), 
    url(https://i.picsum.photos/id/10/800/800.jpg) center/cover;
  
} 

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

如果需要透明度，请使用mask:

 .first  {
  height: 200px;
  width: 400px;
  background: url(https://i.picsum.photos/id/10/800/800.jpg) center/cover;
  -webkit-mask:radial-gradient(100% 100% at top, #fff 60%, transparent 61%);
          mask:radial-gradient(100% 100% at top, #fff 60%, transparent 61%);
}
.bottom {
  -webkit-mask:radial-gradient(100% 100% at top, transparent 60%, #fff 61%);
          mask:radial-gradient(100% 100% at top, transparent 60%, #fff 61%);

}
body {
  background:yellow;
} 

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

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

I'm trying to create transparent div full width and height around 500px using borders but i have trouble with creating this kind of curved shape. It should look like on the example image, the yellow shape.

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

I have included a link to my work until this moment but without success.

解决方案

You can use clip path in both ways (on the top element or the bottom one) and simply make top and bottom to overlay like this :

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

.first .top {
  clip-path: circle(72.9% at 50% 27%);
  height: 200px;
  width: 200px;
  background: url(https://i.picsum.photos/id/10/800/800.jpg) center/cover;
  position: relative;
}

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

.second .top {
  height: 200px;
  width: 200px;
  background:url(https://i.picsum.photos/id/10/800/800.jpg) center/cover;
  position: relative;
}

.second .bottom {
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>

Here is a useful link to generate path :

https://bennettfeely.com/clippy/

---

Here is another idea using radial-gradient

.first  {
  height: 200px;
  width: 400px;
  background: 
    radial-gradient(100% 100% at top, transparent 60%, yellow 61%), 
    url(https://i.picsum.photos/id/10/800/800.jpg) center/cover;
  
}

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

Using mask if you want transparency:

.first  {
  height: 200px;
  width: 400px;
  background: url(https://i.picsum.photos/id/10/800/800.jpg) center/cover;
  -webkit-mask:radial-gradient(100% 100% at top, #fff 60%, transparent 61%);
          mask:radial-gradient(100% 100% at top, #fff 60%, transparent 61%);
}
.bottom {
  -webkit-mask:radial-gradient(100% 100% at top, transparent 60%, #fff 61%);
          mask:radial-gradient(100% 100% at top, transparent 60%, #fff 61%);

}
body {
  background:yellow;
}

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

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

这篇关于带透明顶部的弧形div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！