CSS 带渐变的三角形

Question

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

我需要三角形有一个渐变运行穿过它。
我已经设法完成了前三件事，但我无法使渐变起作用。
我已经尝试以不同的方式定位伪元素，并使用 overflow 和 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

使用clip-path:

.triangle {
  position: fixed;
  top:0;
  left:0;
  width: 80vmin;
  aspect-ratio:1;
  background: linear-gradient(45deg, red, blue);
  clip-path:polygon(0 0,100% 0,0 100%);
}

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

您可以根据需要简单地调整值。

Answer 2

要保持您需要的比例，您可以使用 inline SVG with the preserveAspectRatio="none" property (see MDN)。这样，宽度和高度就固定为您使用的视口单位。
您可以使用 polygon element to make the triangle and the 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>

CSS 带渐变的三角形

CSS triangle with gradient

css

svg

gradient

css-shapes