Html 带渐变的对角背景效果（渐变中的渐变）

我想对角分割成两种颜色的背景，其中一种是白色。我希望另一个是从红色到蓝色的梯度

在这里，我们有一个带白色背景的红色分割（）：

正文{
高度：100vh；
宽度：100vw；
背景：线性梯度（160度，红色，红色60%，白色60%，白色）；
}

——更新-- 通过调整

线性渐变

，可以使用单个元素完成此操作

.shape{
宽度：500px；
高度：300px；
溢出：隐藏；
位置：相对位置；
}
.形状：之后{
内容：“；
位置：绝对位置；
宽度：100%；
身高：100%；
背景：红色；
背景：线性梯度（110度，红色，紫色，蓝色）；
变换原点：0.100%；
变换：旋转（-20度）比例（1.2,1.2）；
底部：0；
左：0；
}

---

我已经设法在主体上使用一个伪元素来实现这一点

请在此处查看它的实际操作：

---

基本上，主体具有水平渐变，然后伪元素变成白色三角形覆盖。

可以。使用给定的css：

  height:100vh;
  width:100vw;
  background:linear-gradient(90deg, red , purple 60%, blue 100%);
  clip-path: polygon(0% 0%,100% 0%,100% 30%,0% 100%);

---

首先用渐变填充它，然后剪裁它。

你也可以在每个渐变上放置两个渐变（我的反应是：渐变中的渐变）

正文{
保证金：0；
最小高度：100vh；
背景：
线性渐变（至右下角，透明50%，白色50.25%），/*根据需要更新方向和开始/停止值*/
线性梯度（90度，红色，蓝色）白色；
背景尺寸：100%自动；
过渡：0.5s
}
/*额外测试*/
身体：悬停{
背景尺寸：125%自动；/*向deg方向和尺寸添加一些额外的调谐*/
}

考虑到这个问题的复杂性，如果符合条件，我将奖励50分。不幸的是，对

剪辑路径的支持有限，但我非常喜欢这个。你可以向上投票，如果喜欢也可以接受：）你将获得向上投票；）但不能接受它，因为它不是所有现代浏览器都支持的。在以后的日子里，当它是我的时候！这是下一个层次。我不知道这是可能的。双渐变是否与所有现代浏览器兼容？@henrikpeterson它至少与任何支持多种背景的浏览器兼容。每个渐变都被视为一个图像。这正是我的问题。你们知道所有的现代浏览器都支持多重背景吗？若支持梯度，那个么多重背景，在梯度最终确定之前就已经支持了：）这太棒了。我将在本周测试这段代码。感谢您发布或找到此问题：D
  height:100vh;
  width:100vw;
  background:linear-gradient(90deg, red , purple 60%, blue 100%);
  clip-path: polygon(0% 0%,100% 0%,100% 30%,0% 100%);