如何使用html和css以图像为背景，使部分的顶部和底部向内弯曲而不是向外弯曲？

Question

我想添加一个部分，该部分应在顶部和底部向内弯曲，并在背景中具有图像。我尝试使用svg和path，但无法获得所需的结果。

我在图像的链接下方插入了我想要的结果。

section {
    padding: 60px 0;
    position: relative;
}

<section id="statistics" data-dir="up" style="background-image: url(https://hero.jpg); background-size: cover; background-position: center; background-attachment: fixed;" class="statistics-section text-white parallax">
        
<svg id="bigHalfCircleCandy" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" style="fill:#ffffff;padding:0;">
  <path d="M0 0 C55 180 100 0 100 0 Z"></path>
</svg>
</section>

Answer 1

这是做到这一点的一种方法。

:root, html, body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
}

* {
 box-sizing: border-box;
}

#header {
  height: 20%;
  width: 100%;
}

#main {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 80%;
  background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0,0,0,0.5)), center / cover no-repeat url("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcSGvXdNxVmnn-fpjDeYYX-BqwD4mzPn6D79pw&usqp=CAU");
}

#top {
  width: 100%;
  height: 35%;
  background: white;
  clip-path: ellipse(65% 80% at center -40%);
}

#center {
  width: 100%;
  flex: 1;
  color: white;
  font-size: 1.5em;
  text-align: center;
  font-family: 'Helvetica Neue', sans-serif;
}

#bottom {
  width: 100%;
  height: 35%;
  background: white;
  clip-path: ellipse(65% 80% at center 140%);
}

<div id="header"></div>
<div id="main">
  <div id="top"></div>
  <div id="center">
    Some Interesting Facts About Us
  </div>
  <div id="bottom"></div>
</div>
<div id="footer"></div>

Answer 2

您可以使用相同的路径并将其旋转180度，然后将其绝对定位在该部分的底部。为了确保元素高度合适，我必须在section元素上添加一个明确的高度。

section {
    margin: 60px 0;
    height: 400px;
    position: relative;
}
#statistics {
  background: url(https://codropspz-tympanus.netdna-ssl.com/codrops/wp-content/uploads/2015/01/blend-mode-example-screenshot.png);
  background-size: cover; 
  background-attachment: fixed;
  background-position: center;
}
#bigHalfCircleCandyBottom {
  transform: rotate(180deg);
  position: absolute;
  bottom: 0;
  left: 0;
}

<section id="statistics" data-dir="up" class="statistics-section text-white parallax">
        
<svg id="bigHalfCircleCandy" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" style="fill:#ffffff;padding:0;">
  <path d="M0 0 C55 180 100 0 100 0 Z"></path>
</svg>

<svg id="bigHalfCircleCandyBottom" version="1.1" width="100%" height="100" viewBox="0 0 100 100" preserveAspectRatio="none" style="fill:#ffffff;padding:0;">
  <path d="M0 0 C55 180 100 0 100 0 Z"></path>
</svg>
</section>

可以在this Fiddle中找到更完整的示例以及中间文本的容器。