带有CSS

Question

我在Photoshop中做了一个像这样的页脚：

正如您所看到的，这里的页脚在整个过程中略微弧形。我尝试过使用border-radius，但是这几乎只是针对边缘，这使得弧线在边缘更加弯曲，甚至没有像图像中看到的那样接受微妙的弧形页脚的效果。

有一种简单的CSS方法可以做到这一点，还是需要一些JavaScript或其他东西来实现这一目标？

Answer 1

使用带有border-radius的页脚的伪元素来制作拱门。

我在这里制作了不同的颜色，这样你就可以看出哪个元素是哪个。

body {
 margin: 0;
 max-height: 100vh;
 overflow: hidden;
}
footer {
  bottom: 0; left: 0; right: 0;
  position: absolute;
  background: brown;
  height: 10vh;
}
footer::before {
  content: '';
  background: red;
  width: 200%;
  position: absolute;
  left: 50%; 
  top: -100%;
  transform: translateX(-50%);
  height: 1000%;
  border-radius: 50%;
  z-index: -1;
}

<footer></footer>

Answer 2

这个解决方案使用大宽度来获得更令人愉悦的曲线，但没有伪元素：

footer {
       background-color: red;
       width: 200%;
       transform: translateX(-25%);
       height: 200px;
       border-radius: 50% 50% 0 0;
    }

<div>
  <footer></footer>
</div>

Answer 3

它并不完美，但在这里我有一个非常大的圆圈，它的绝对位置是隐藏的溢出，所以你只能看到圆弧的顶部。

＆＃13;

＆＃13;

#container{
  background: grey;
  height:300px;
  width:500px;
  position:relative;
  overflow:hidden;
}

#arc{
  position: absolute;
  top:200px;
  left:-800px;
  width:2000px;
  height:2000px;
  border-radius:2000px;
  background:brown;
}

＆＃13;

<div id="container">
  <div id="arc">
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

{{3}}

Answer 4

实际上，你可以使用border-radius来做到这一点，而不需要伪元素。

    .arc {
      width: 100%;
      height:500px;
      background: #000000;
      border-radius: 50% / 30px;
      border-bottom-right-radius: 0;
      border-bottom-left-radius: 0;
    }

<div class="arc"></div>

工作得很好。确保使用时：

border-radius: 50% / 30px;

第一个属性始终为“50％”，因为这将确保弧线在中间相遇。第二个属性（在“/”之后）是从中间到边缘测量的弧的高度

Answer 5

圆形的解决方案，但反应灵敏！

footer {
  background: #ececec;
  height: 200px;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.arc {
  position: absolute;
  top: 0px;
  right: calc(-80%);
  width: 300%;
  padding-top: 100%;
  border-radius: 100%;
  background: black;
}

<footer>
  <div class="arc">

  </div>
</footer>