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