具有 2 个渐变级别（色标）的线性渐变三角形

Question

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

我希望 triangle-bottom-right 具有额外的渐变级别（额外的色标）。

应该从左到右，从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>

(使用Semantic-UI用于底部粘性)

实例：http://jsfiddle.net/fu2dhfdv/1/

Answer 1

据我所知，这不能单独使用 linear-gradient 背景图像来完成，因为直角三角形本身显示为三角形只是因为它 50% 是透明的，其余部分是填充的。如果我们在这一层的顶部放置另一层从左到右的渐变，那么渐变将显示 triangle-bottom-right 的整个正方形区域（或者）如果我们将从左到右的渐变放置在 triangle-bottom-right 的底部然后这一层也会显示整个方形区域，因为产生三角形的渐变的上半部分是透明的。因此，唯一的选择是 (a) 将上半部分设为 "white" 并将第二个渐变放在其下方，或者 (b) 使用蒙版或剪辑路径隐藏上半部分。

使用 SVG 蒙版：

由于CSSmask和CSSclip-path目前都没有很好的浏览器支持。最好的选择是为 mask 使用内联 SVG，如下面的代码片段所示。

.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;
}
svg {
  position: relative;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
}
polygon#right-triangle {
  fill: url(#grad);
  mask: url(#triangle);
}

<script src="http://semantic-ui.com/dist/semantic.js"></script>
<link href="http://semantic-ui.com/dist/semantic.css" rel="stylesheet" />
<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">
    <svg viewBox="0 0 100 100" preserveAspectRatio="none">
      <defs>
        <linearGradient id="grad">
          <stop offset="0%" stop-color="rgba(70, 70, 70, 0.35)" />
          <stop offset="100%" stop-color="rgba(255, 255, 255, 0)" />
        </linearGradient>
        <mask id="triangle">
          <polygon points="0,0 100,0 100,100 0,100" fill="black" />
          <polygon points="0,90 0,100 100,100 100,0" fill="white" />
        </mask>
      </defs>
      <polygon points="0,0 100,0 100,100 0,100" id="right-triangle" />
    </svg>
  </div>
</div>

使用 SVG 多边形：（也可以用 path 元素完成）

这也可以使用一个 SVG polygon 元素代替 mask 来完成，如下面的代码片段所示。我会留给你选择一个:)

.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;
}
svg {
  position: relative;
  right: 0px;
  bottom: 0px;
  width: 100%;
  height: 100%;
}
polygon#right-triangle {
  fill: url(#grad);
}

<script src="http://semantic-ui.com/dist/semantic.js"></script>
<link href="http://semantic-ui.com/dist/semantic.css" rel="stylesheet" />
<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">
    <svg viewBox="0 0 100 100" preserveAspectRatio="none">
      <defs>
        <linearGradient id="grad">
          <stop offset="0%" stop-color="rgba(70, 70, 70, 0.35)" />
          <stop offset="100%" stop-color="rgba(255, 255, 255, 0)" />
        </linearGradient>
      </defs>
      <polygon points="0,90 0,100 100,100 100,0" id="right-triangle" />
    </svg>
  </div>
</div>

使用 CSS 掩码：（最适合你，因为 Chrome 是唯一的目标）

既然你已经指出目标浏览器只有 Chrome 并且它支持 CSS mask，你也可以使用 -webkit-mask-image 属性具有线性渐变，如下面的代码片段所示。我将它列为最后一个只是因为最不推荐任何其他使用不同浏览器要求查看此线程的用户使用它。

.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 right, rgba(70, 70, 70, 0.15), rgba(255, 255, 255, 0));
  -webkit-mask-image: linear-gradient(to top left, white 50%, transparent 50%);
}

<script src="http://semantic-ui.com/dist/semantic.js"></script>
<link href="http://semantic-ui.com/dist/semantic.css" rel="stylesheet" />
<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>

使用CSS剪辑路径：（再次有用，因为Chrome是唯一的目标）

也可以使用 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 right, rgba(70, 70, 70, 0.15), rgba(255, 255, 255, 0));
  -webkit-clip-path: polygon(0% 90%, 0% 100%, 100% 100%, 100% 0%);
}

<script src="http://semantic-ui.com/dist/semantic.js"></script>
<link href="http://semantic-ui.com/dist/semantic.css" rel="stylesheet" />
<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>

Answer 2

仅供参考，并被视为纯白色背景的潜在后备。

3 个渐变 + 背景大小可以工作。

html {
  min-height:100%;
  background:
    linear-gradient(to  left, rgba(255,255,255,0.75), rgba(255,255,255,0) 60%) bottom no-repeat,
    linear-gradient(to top left, rgba(0,0,0,0.1) 50%, transparent 50%)bottom right no-repeat,
    linear-gradient( to top right, #5EC252 50%, transparent 50%)bottom left no-repeat white;  
  background-size:100% 245px, 127% 245px ,  40%  170px;
}

具有 2 个渐变级别（色标）的线性渐变三角形

linear-gradient triangle with 2 gradient levels (color stops)

html

css

css-shapes

linear-gradients