如何制作 header 的圆底？

Question

如何使 header 像这样圆角？

Answer 1

方法有很多种，他是一个简单的方法。您有 HTML/CSS 经验还是新手？

body {
  margin: 0;
  background: #8e8e8e;
}
.header {
  height: 50px;
  width: 100%;
  line-height: 50px;
  text-align: center;
  color: #fff;
}
.content {
  background: #fff;
  height: calc(100vh - 110px);
  border-top-right-radius: 50% 60px;
  border-top-left-radius: 50% 60px;
  padding: 60px 20px 0 20px;
}

<div class="header">Header</div>
<div class="content">Content</div>

Answer 2

.div {
  position: relative;
  overflow: hidden;
  padding: 50px 0;
}

.div-inner {
  position: relative;
  background: black;
  height: 120px;
}

.div-inner:before,
.div-inner:after {
  box-shadow: 0 0 0 80px #000;
  border-radius: 100%;
  position: absolute;
  height: 150px;  /* You can change it */ 
  content: '';
  right: -20%;
  left: -20%;
  top: 100%;
}

<div class="div">
  <div class="div-inner"></div>
</div>

如何制作 header 的圆底？

How to make rounded bottom of header?

html

css

css-shapes