如何在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>

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

Answer 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>

Answer 3

尝试使用此：

.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>

Answer 4

您可以使用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>

Answer 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>

Answer 6

尝试使用：

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