CSS渐变创建两种不同的颜色设计

Question

我正在尝试使用特定颜色创建特定形状以将其保留为背景。我成功地创建了我想要的渐变色，但我正在努力塑造正确的形状。

这是我所做的以及我想要实现的目标，

我的工作：

期望：

代码：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

我愿意使用任何其他方法，只要它只有一个＆＃39; div＆＃39;。我不想使用两个不同的div，它们在响应式设计中引起了很多问题。我尝试使用 clip-path ，但由于设计的性质，这也没有帮助。

任何帮助都将不胜感激。

Answer 1

使用多个渐变，然后调整尺寸和位置以获得所需内容：

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用x和dataset

等dataset$x <- as.factor(dataset$x)

＆＃13;

＆＃13;

pseudo-elements

＆＃13;

:before

＆＃13;

＆＃13;

＆＃13;