带有渐变的CSS三角形

Question

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

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

Answer 1

要保持所需的比例,可以使用带属性的内联SVGpreserveAspectRatio="none"(请参阅MDN).这样,宽度和高度将固定到您使用的视口单元.
您可以使用多边形元素,使三角和的LinearGradient元素来填充渐变三角形:

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>