css 如何绘制堆叠在另一个顶部的弯曲div？

fdx2calv 于 2022-12-30 发布在其他

关注(0)|答案(2)|浏览(166)

我正在使用矩形JS的Web应用程序，我只有初学者的HTML和CSS知识。所以你能建议我实现像下面这样的东西与响应UI，包含按钮，文本和图像。我怎么写CSS样式曲线的div和放置另一个下面没有任何空白空间。

有人能提出任何解决方案吗？任何帮助都将不胜感激。我已经尝试了径向梯度法，如下所示。

<div className="background1">
 ....
</div>
<div className="background2">
.....
</div>

 .background1 {
   width: 100%;
   background: radial-gradient(120% 800px at 50% -30px, red 75%, 
    transparent 75%)  no-repeat;
    z-index: 2;
    position:relative;
    margin-bottom: 0px;
    }

  .background2 {
   background-color: #202492;
   width: 100%;
   background: radial-gradient(120% 800px at 50% -30px,blue 75%, 
   transparent 75%) no-repeat;
   position: relative;
   z-index: 1;
   margin-top: -50px;
   }

但我得到了这个

块引号

css

来源：https://stackoverflow.com/questions/74948290/how-to-draw-curved-div-stacked-on-top-of-one-another

2条答案

按热度按时间

ht4b089n1#

我觉得你需要这样的东西：

.btn1 {
    background: #190b0b;
    color: #fff;
    padding: 1em 2.5em;
    box-shadow: 1px 2px 7px -1px #190b0b;
}
.background1 {
    width: 100%;
    background: red;
    z-index: 2;
    position: relative;
    margin-bottom: 0px;
    padding: 6em 0;
    border-radius: 0 0 10em 10em;
    text-align: center;
}

.background2 {
    background-color: #202492;
    z-index: 1;
    position: relative;
    margin-bottom: 0px;
    padding: 6em 0;
    border-radius: 0 0 10em 10em;
    text-align: left;
    width: 100%;
    top: -10em;
    color: #fff;
}

.background3 {
    background-color: blue;
    z-index: 0;
    position: relative;
    margin-bottom: 0px;
    padding: 6em 0;
    border-radius: 0 0 10em 10em;
    text-align: left;
    width: 100%;
    top: -20em;
    color: #fff;
}

.text {
    margin-top: 6em;
    max-width: 50%;
    padding: 0 6em;
}

<div class="background1">
  <button class="btn1">Button</button>
</div>

<div class="background2">
  <div class="text"> 
    <h2> Text1 </h2>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, nibh sed tempus bibendum, lacus turpis dictum ipsum, nec consectetur diam nisi eget mauris.  </p>
  </div>
</div>

<div class="background3">
  <div class="text"> 
    <h2> Text2 </h2>
    <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse pellentesque, nibh sed tempus bibendum, lacus turpis dictum ipsum, nec consectetur diam nisi eget mauris.  </p>
  </div>
</div>

只需更改border-radius和padding值，即可获得您想要的完美曲线。

赞(0）回复(0）举报 2022-12-30

ivqmmu1c2#

可以使用border-bottom-left-radius和border-bottom-l-right-radius或border-radius：0像素0像素3像素3像素;

div {
    height: 300px;
    width: 300px;
    border-bottom-right-radius: 200px;
    border-bottom-left-radius: 200px;
    background: black;
}

<div></div>

赞(0）回复(0）举报 2022-12-30

我来回答

css 如何绘制堆叠在另一个顶部的弯曲div？

2条答案

相关问题

热门标签

最新问答