带渐变的 CSS 三角形答案

【问题标题】：CSS triangle with gradient带渐变的 CSS 三角形
【发布时间】：2017-10-30 12:00:54
【问题描述】：

我正在尝试实现一个用渐变填充的三角形。三角形应位于页面的左上角，并拉伸 50% 的水平视口和 120% 的垂直视口。

我需要三角形让渐变穿过它。
我已经成功完成了前三件事，但我无法让渐变发挥作用。
我尝试过使用溢出和transform: rotate(); 以不同方式定位伪元素来实现它，但我就是无法让它工作。

这是我目前所拥有的JSfiddle：

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0px 0 120vh 50vw;
  border-color: transparent transparent transparent green;
}

&lt;div class="triangle"&gt;&lt;/div&gt;

【问题讨论】：

为什么这个目标用javascript和jquery？
我删除了 javascript 和 jquery 标签。
以防万一有 JS 或 JQuery 方式来实现这一点，我也是开放的，因为用纯 CSS 做这件事似乎很老套。
css-tricks.com/examples/GradientBorder
您对浏览器兼容性有什么要求？应该有一个使用背景渐变和剪辑路径的简单解决方案，但浏览器支持仍然有点有限：caniuse.com/#search=clip-path

标签： css svg gradient css-shapes

【解决方案1】：

要保持所需的比例，您可以使用 inline SVG 和 preserveAspectRatio="none" 属性 (see MDN)。这样，宽度和高度就固定在您使用的视口单位。
您可以使用polygon element 来制作三角形，并使用linearGradient element 来用渐变填充三角形：

svg {
  width: 50vw;
  height: 120vh;
}

<svg viewBox="0 0 10 10" preserveAspectRatio="none">
  <defs>
    <linearGradient id="gradient">
      <stop offset="5%" stop-color="darkorange" />
      <stop offset="95%" stop-color="red" />
    </linearGradient>
  </defs>
  <polygon fill="url(#gradient)" points="0 0 10 0 0 10" />
</svg>

【讨论】：

SVG！我什至没有想到这一点。这将完美地工作，因为它比那里的其他 CSS 解决方案干净得多。非常感谢。
不错的解决方案兄弟。

【解决方案2】：

使用clip-path:

.triangle {
  position: fixed;
  top:0;
  left:0;
  width: 80vmin;
  aspect-ratio:1;
  background: linear-gradient(45deg, red, blue);
  clip-path:polygon(0 0,100% 0,0 100%);
}

&lt;div class="triangle"&gt;&lt;/div&gt;

您可以根据需要简单地调整值。

【讨论】：

这个问题是你不能按照OP的需要保持三角形的比例。
@web-tiki 我们可以，但这需要进行一些计算以实现它。但我同意它可能很复杂