如何为 header 背景创建分层响应渐变

Question

感谢您的帮助和建议。我更关注事物的开发方面，并试图弄清楚事物的设计方面。无论如何...

我似乎能够创建两种渐变，但无法让它们协同工作。基本上尝试让这些分层和响应，以便它们（和 parent 部分）可以根据 header 中的内容收缩和增长 + 从 PC 到平板电脑再到移动设备响应。

在图像中，您会看到一个深蓝色渐变，下面是一个浅蓝色渐变。那么白色区域就是transparent。我试过使用剪辑路径，但一个似乎切断了另一个。我在 Elementor 中构建它，所以我没有完整部分块的所有代码。我已将其添加到该部分的自定义 CSS 中。我只是希望在如何分层这些渐变方面找到一些方向，以便它们在不切断另一个的情况下做出响应。希望在 1 div/section.

这是我使用的，但如果有更好的技术请告诉我。

左蓝色渐变

background-image: linear-gradient(90deg, #18253C 0%, #293D62 100%);
clip-path: polygon(0 0, 100% 0, 100% 90%, 0% 100%);

右浅蓝色渐变

background-image: linear-gradient(90deg, #cbdeee 0%, #5480a5 100%);
clip-path: polygon(100% 75%, 80% 75%, 100% 100%);

Answer 1

可以继续在线性渐变背景上使用剪辑路径，您可以将它们放在伪元素上而不是元素本身。

这个片段就是这样做的，将两个伪元素分层放在主要元素后面，作为背景而不影响实际元素：

.bg {
  width: 100vw;
  height: 100vw;
  positio: relative;
}

.bg::before,
.bg::after {
  content: '';
  display: inline-block;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}

.bg::after {
  background-image: linear-gradient(90deg, #18253C 0%, #293D62 100%);
  clip-path: polygon(0 0, 100% 0, 100% 75%, 0% 100%);
}

.bg::before {
  background-image: linear-gradient(90deg, #cbdeee 0%, #5480a5 100%);
  clip-path: polygon(0 50%, 100% 50%, 100% 95%, 0 50%);
}

<div class="bg"></div>

如何为 header 背景创建分层响应渐变

How to create layered responsive gradients for header background

css

wordpress

elementor