html - CSS样式实现曲线圆

Question

我只想像附件一样实现标题部分。有人可以帮助我使用 CSS 做到这一点。

标签： htmlcssuser-interfacebootstrap-4

Answer 1

注意：您可以通过使用 2 个 divabsolute positioning与他们的父母作为relative positioned

工作代码：

.c-wrapper {
  position: relative;
}
.red {
  background: red;
  width: 100%;
  height: 100px;
  border-bottom-left-radius: 200px;
  border-bottom-right-radius: 200px;
  position: absolute;
  top: 0;
}

.red-1 {
  background: red;
  width: 200px;
  height: 100px;
  border-bottom-left-radius: 100px;
  border-bottom-right-radius: 100px;
  position: absolute;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
}

<div class="c-wrapper">
  <div class="red"></div>
  <div class="red-1"></div>
</div>

工作 JSFiddle