带渐变的 CSS 三 Angular 形

Question

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

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

这是一个 JSfiddle到目前为止我所拥有的:

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

<div class="triangle"></div>

Answer 1

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

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>