如何在 CSS 中创建软曲线？答案

【问题标题】：How can I create a soft curve in CSS?如何在 CSS 中创建软曲线？
【发布时间】：2020-10-24 18:47:59
【问题描述】：

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

【问题讨论】：

您对 svg 的反对意见是什么？大概能满足你的需求，尤其是内联svg？

【解决方案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>

用这个，希望对你有帮助

【讨论】：

您甚至可以使用伪元素，这样您就不会只为设计元素使用空标记。

【解决方案2】：

您可以将此形状添加为伪元素以消除对额外 HTML 块的需求

.curved-demo {
  position: relative;
  overflow: hidden;
  
  /* just styles for demo */
  font-family: Arial;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
  color: #fff;
  text-transform: uppercase;
  font-size: 20px;
}

.curved-demo:before {
  content: "";
  display: block;
  position: absolute;
  left: -50%;
  top: 0;
  width: 200%;
  bottom: 0;
  background-color: #e44627;
  border-top: 15px solid #fdedea;
  border-radius: 50% 50% 0 0;
  z-index: -1;
}

/* just styles for demo */
.curved-demo > button {
  margin-top: 20px;
  background-color: #000;
  color: #fff;
  padding: 10px 20px;
  border: 0;
  text-transform: inherit;
  font-weight: bold;
  border-radius: 3px;
  font-size: inherit;
}

<div class="curved-demo">
  Ready to get started
  <button>Schedule a demo</button>
</div>

【讨论】：

【解决方案3】：

您可以使用radial-gradient 来执行此操作。发生的事情是我们有一个径向渐变，它使椭圆比实际元素大得多。然后有另一个椭圆在其后面，用于第二种颜色。像这样的：

.thing {
    padding: 100px 20px 50px 20px;
    background-image: radial-gradient(ellipse 100% 200% at 50% 200%, #f43 90%, #0000 90%),
        radial-gradient(ellipse 100% 200% at 50% 190%, #f87 90%, #0000 90%);
    text-align: center;
    font-family: sans-serif;
    text-transform: uppercase;
    color: white;
}
a {
    color: inherit;
    background: #111;
    padding: 10px;
    text-decoration: none;
}

<div class="thing">
    <p>Ready to get started?</p>
    <a href="">Schedule a demo</a>
</div>

【讨论】：

【解决方案4】：

试试这个：

.container{
  width: 100%;
  overflow: hidden;
}
.background{
  height: 80vh;
  background-color: #e44627;
}

.effect_curve{
  position: relative;
  top: 50px;
  left: -50%;
  width: 200% !important;
  border-radius: 50% 50% 0 0;
}
.effect_curve::after{
  content: "";
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 0 0;
  background-color: #e44627;
  transform: rotate(2deg);
  z-index: -1;
  opacity: 0.2;
}
.effect_curve::before{
  content: "";
  position: absolute;
  bottom: 10px;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50% 50% 0 0;
  background-color: #e44627;
  transform: rotate(-0.5deg);
  z-index: -1;
  opacity: 0.2;
}

<div class="container">
  <div class="background effect_curve">
  </div>
</div>

【讨论】：

【解决方案5】：

您将使用border-radius，但您需要通过执行以下操作获得一点创意：border-radius: 50%/2rem 2rem 0 0; 位于与您的内容不同的元素上。

.container {
  width: 100%;
  overflow-x: hidden;
}
.my-cool-el {
  background-color: #f00;
  color: #fff;
  margin-top: 2rem;
  padding: 2rem 0;
  position: relative;
  text-align: center;
}
.my-cool-el:before {
  background-color: #f00;
  border-radius: 50%/2rem 2rem 0 0;
  content:'';
  display: block;
  height: 2rem;
  left: 0;
  position: absolute;
  top: -2rem;
  width: 100%;
}

<div class="container">
  <div class="my-cool-el">
    Ready To Get Started
  </div>
 </div>

【讨论】：

我自己试过了，但正如您所见，极端（左/右）看起来不像应有的弯曲。

【解决方案6】：

试试这个：

div{
  border-radius:15px 100px 100px 5px;
  background:#73AD21;
  padding:20px; 
  width:200px;
  height:150px; 
}

【讨论】：