CSS 渐变打造两种不同的色彩设计

Question

我正在尝试创建具有特定颜色的特定形状以将其作为背景。我成功地创建了我想要的渐变颜色，但我正在努力调整形状。

这是我所做的以及正在努力实现的目标，

我的作品：

期望：

代码：

.grad {
  height: 400px;
  width: 900px;
  background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}

<div class="grad"></div>

我愿意使用任何其他方法，只要它只有一个 'div'。我不想使用两个不同的 div，它们会在响应式设计中引起很多问题。我尝试使用 clip-path 但由于设计的性质，这也无济于事。

如有任何帮助，我们将不胜感激。

Answer 1

使用多重渐变然后调整尺寸和位置以获得你想要的：

.grad {
  height: 100px;
  width: 300px;
  background:
  linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0) 0 0/100% calc(100% - 10px) no-repeat,
  linear-gradient(110deg, #62e6a5 52%, transparent 0) 0 100%/100% 100% no-repeat;
}

<div class="grad"></div>

Answer 2

像:before和:after

一样使用pseudo-elements

.grad{
  position: relative;
  height:200px;
  width:450px;
  margin-bottom: 10px;
  background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}

.grad-new{
  position: relative;
  height:200px;
  width:450px;
  margin-bottom: 10px;
  overflow: hidden;
  background: linear-gradient(110deg, #62e6a5 50%, #9ae7ba 50%, #9ae7ba 52%, #d1f5de 52%, #d1f5de 0);
}

.grad-new:before{
  content: '';
  position: absolute;
  width: 3%;
  height: 10px;
  bottom: 0;
  right: 55.6%;
  background: #62e6a5;
  transform: skew(-20deg);
}
.grad-new:after{
  content: '';
  position: absolute;
  width: 100%;
  height: 10px;
  bottom: 0;
  left: 44.4%;
  background: #fff;
  transform: skew(-20deg);
}

<div class="grad"></div>
<div class="grad-new"></div>

CSS 渐变打造两种不同的色彩设计

CSS gradient to create two different color design

html

css

gradient

linear-gradients