如何在 CSS 中创建柔和的曲线？

Question

是否可以仅使用 CSS（无图像/svg）创建像示例图像中那样的弯曲块？

Answer 1

.curveArea {
  width: 500px;
  height: 200px;
  margin: 0 auto;
}

.mainBox {
  height: 100%;
  background: #fff;
  overflow: hidden;
}

.curveSection {
  width: 200%;
  height: 100%;
  border-radius: 50%;
  background: #e44627;
  top: 25%;
  left: -50%;
  right: 0;
  position: relative;
  border-top: 10px solid #fdedea;
}

<div class="curveArea">
  <div class="mainBox">
    <div class="curveSection"></div>
  </div>
</div>

使用这个，我希望它会有所帮助