Css 弯曲的页脚

Question

只有css才能实现这个页脚吗？

谢谢

Answer 1

请试试这个：

.container {
  background: yellow;
  height: 180px;
  width: 400px;
}

.box {
  width:400px;
  height:80px;
  background-color: white;
  border:1px solid white;
  border-width:0 0 13px 0;
  margin:1rem auto;
  -webkit-border-radius:0% 0% 50% 50% / 0% 0% 50% 50%;
  -moz-border-radius:0% 0% 50% 50% / 0% 0% 50% 50%;
  border-radius:0% 0% 50% 50% / 0% 0% 50% 50%;
}

<div class="container"><div class="box"></div></div>

Css 弯曲的页脚

Css curvy footer

css

background

border