带有渐变的CSS三角形

我正在尝试实现一个充满渐变的三角形.
三角形应位于页面的左上角,并拉伸50％的水平视口和120％的垂直视口.

我需要三角形有一个贯穿它的渐变.
我已经设法做了前三件事,但我无法使梯度起作用.
我尝试过以不同的方式定位伪元素溢出和变换：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>

要保持所需的比例,可以使用 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>