Html 具有2个渐变级别的线性渐变三角形（颜色停止）

我现在在页面底部显示了两个三角形，一个在左边，一个在右边。直角三角形是透明的。两个三角形都有一种颜色

我希望右下角的

三角形

具有额外的渐变级别（额外的颜色停止）

它应该从左到右，以

rgba（70,70,70,0.15）

开始，以

rgba（70,70,70,0）

结束。目标浏览器是Chrome（通过Electron运行）

生成的三角形应能够调整到浏览器宽度，高度不变

我的CSS：

.triangle-footer {
    position: relative;
    bottom: 0px;
    height: 176px;
    width: 100%;
}
.triangle-bottom-left {
    position: absolute;
    width: 40%;
    height: 100%;
    left: 0px;
    bottom: 0px;
    background: linear-gradient(to right top, rgba(94, 194, 82, 100) 50%, rgba(255, 255, 255, 0) 50%);
}
.triangle-bottom-right {
    position: absolute;;
    width: 125%;
    height: 140%;
    right: 0px;
    bottom: 0px;
    background: linear-gradient(to left top, rgba(70, 70, 70, 0.15) 50%, rgba(255, 255, 255, 0) 50%);
}

我的HTML：

<div class="ui fixed bottom sticky triangle-footer">
  <div class="triangle-bottom-left"></div>
</div>

<div class="ui fixed bottom sticky triangle-footer">
  <div class="triangle-bottom-right"></div>
</div>

（对底部粘性使用语义UI）

---

活生生的例子：

据我所知，仅使用

线性渐变

背景图像无法做到这一点，因为直角三角形本身显示为三角形，只是因为它50%透明，其余部分填充。如果我们在该层的顶部放置另一层从左到右的渐变，则渐变将显示为

右下角三角形的整个正方形区域

（或）如果我们把从左到右的渐变放在这个层的底部，那么它也会出现在整个正方形区域中，因为产生三角形的渐变的上半部分是透明的。因此，唯一的选择是（a）将上半部分设置为“白色”，并将第二个渐变放置在其下方，或者（b）使用遮罩或剪辑路径隐藏上半部分

使用SVG掩码：

因为CSS掩码和CSS剪辑路径目前都没有很好的浏览器支持。最好的选择是对

掩码使用内联SVG，如下面的代码段中所示


。三角形页脚{
位置：相对位置；
底部：0px；
高度：176像素；
宽度：100%；
}
.左下角三角形{
位置：绝对位置；
宽度：40%；
身高：100%；
左：0px；
底部：0px；
背景：线性梯度（右上角，rgba（9419482100）50%，rgba（255，255，255，0）50%）；
}
.右下角三角形{
位置：绝对位置；
宽度：125%；
身高：140%；
右：0px；
底部：0px；
}
svg{
位置：相对位置；
右：0px；
底部：0px；
宽度：100%；
身高：100%；
}
多边形#直角三角形{
填充：url（#梯度）；
掩码：url（#三角形）；
}
仅供参考，并被视为纯白色背景下的潜在后备方案

3个渐变+背景大小可以


html{
最小高度：100%；
背景：
线性梯度（向左，rgba（255255,0.75），rgba（255255,0）60%）底部无重复，
线性渐变（左上角，rgba（0,0,0,0.1）50%，透明50%）右下角不重复，
线性渐变（右上角，#5EC252 50%，透明50%）左下角无重复白色；
背景尺寸：100%245px，127%245px，40%170px；
}
不太明白。右下角三角形已具有指定的渐变。你在找什么？如果可能，是否可以添加预期输出的图像？完成。希望现在更清楚了。我想让右下角的
三角形从左边的一种颜色开始，在右边的另一种颜色结束。好的，你的意思是，在通过渐变创建的三角形中，你需要一个从左到右（或从右到左）的渐变，而不是从右下到左上的渐变？这将是非常困难的，因为三角形本身的创建仅仅是因为从右下到左上的渐变。如果你在上面或下面添加一个左右渐变的图层，你就不会得到这种效果。你可能需要的是一个遮罩，除非你的直角三角形的上半部分可以是白色而不是透明的。是的，只要第二个渐变覆盖了通过渐变创建的三角形的颜色。它如何与遮罩一起工作？我对任何实现都是开放的，我唯一需要的是这些三角形的宽度百分比，所以它们可以调整到浏览器的宽度。一如既往的好答案！但由于三角形是一个单独的元素，仅用于此目的，因此可以对其进行变换：旋转。（并获得更好的支持）公平点@VAL。它需要元素更大，并且有一个倾斜的线性梯度来覆盖旋转。您是否计划发布一个单独的答案？如果是的话，我会避免将其更新到我的答案中。事实上，现在我记得@vals我尝试过转换（你会在两个CSS片段中看到不相关的
转换原点
），但放弃了它，因为由于宽度必须是动态的，角度会产生不同的结果。你是对的，这可能是个问题。。。我将尝试解决它：-）我没有注意到处理宽度变化的要求。。。这使得旋转或其他变换不合适（或者至少我找不到方向）：-(