CSS样式实现曲线圆答案

【问题标题】：CSS style to implement curved circleCSS样式实现曲线圆
【发布时间】：2021-03-02 13:50:20
【问题描述】：

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

【问题讨论】：

如果你熟悉 svg 也可以不使用 css 并显示一些代码

【解决方案1】：

注意：您可以使用 2 个带有 absolute positioning 的 div 来实现，它们的父级为 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>

Working JSFiddle

【讨论】：