带有渐变效果的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>

- finners

---

为什么要使用JavaScript和jQuery来实现这个目标？ - Carsten Løvbo Andersen

我删除了 JavaScript 和 jQuery 标签。 - Constantin Groß

如果有使用JS或JQuery实现的方法，我也很乐意尝试，因为使用纯CSS似乎有点hack-y。 - finners

是的，剪辑路径是我首选使用的 - https://bennettfeely.com/clippy/ - 但我需要支持IE9+，所以我不得不寻找替代方案。 - finners

请查看此问题：https://dev59.com/HWPVa4cB1Zd3GeqP9M5S - JiFus

Answer 1

为了保持所需的比例，您可以使用具有preserveAspectRatio="none"属性（请参见MDN）的内联SVG。这样，宽度和高度将固定为您使用的视口单位。
您可以使用polygon元素制作三角形，使用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>

- web-tiki

---

SVG！我甚至没有想到过这个。这将非常完美地工作，因为它比其他CSS解决方案更加简洁。非常感谢。 - finners

不错的解决方案，兄弟。 - Jithin Raj P R

Answer 2

使用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>

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

- Temani Afif

---

问题在于您无法保持三角形的比例，这是 OP 需要的。 - web-tiki

@web-tiki 我们可以做到，但这需要进行一些计算才能实现。但我同意这可能会很复杂。 - Temani Afif