html - 具有 2 个渐变级别(色标)的线性渐变三 Angular 形

Question

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

我希望 triangle-bottom-right 有一个额外的渐变级别(额外的色标)。

它应该从左到右，以 rgba(70, 70, 70, 0.15) 开始，以 rgba(70, 70, 70, 0) 结束.目标浏览器是 Chrome(通过 Electron 运行)。

生成的三 Angular 形应该能够根据浏览器宽度调整大小，高度不变。

我的 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 背景图像来完成，因为直 Angular 三 Angular 形本身显示为三 Angular 形只是因为它 50% 是透明的，其余部分是填充的。如果我们在这一层之上放置另一层从左到右的渐变，那么渐变将显示在 triangle-bottom-right 的整个正方形区域(或者)如果我们将 left-该层底部的向右渐变也会显示整个方形区域，因为产生三 Angular 形的渐变的上半部分是透明的。因此，唯一的选择是 (a) 将上半部分设为“白色”并将第二个渐变置于其下方，或者 (b) 使用蒙版或剪辑路径隐藏上半部分。

使用 SVG 蒙版:

由于CSS mask和CSS clip-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 Masks:(最适合您，因为 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 Clip Path:(同样有用，因为 Chrome 是唯一的目标)

也可以像下面的代码片段一样使用 CSS clip-path 来完成。右下角的元素被剪裁成所需的三 Angular 形形状，并对其应用从左到右的渐变。

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