CSS triangle with gradient

Question

I'm trying to achieve a triangle filled with a gradient. The triangle should sit in the top left hand corner of the page and stretch 50% of the horizontal viewport and 120% of the vertical viewport.

I need the triangle to have a gradient running through it.
I've managed to do the first three things but I can't get the gradient to work.
I've tried positioning pseudo elements in different ways with overflow and also transform: rotate(); to achieve it but I just can't get it to work.

Here's a JSfiddle of what I have so far :

.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

To keep the proportions you need, you can use an inline SVG with the preserveAspectRatio="none" property (see MDN). This way, the width and height are fixed to the viewport unit you used.
You can use the polygon element to make the triangle and the linearGradient element to fill the triangle with a gradient :

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>