带有渐变的CSS三角形

我正在尝试实现一个充满渐变的三角形.三角形应位于页面的左上角,并拉伸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;
}

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