带渐变的css三角形

本教程将介绍带渐变的css三角形的处理方法，这篇教程是从别的地方看到的，然后加了一些国外程序员的疑问与解答，希望能对你有所帮助，好了，下面开始学习吧。

问题描述

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

我需要三角形有一个渐变穿过它。
我已经成功地完成了前三件事，但我无法使渐变起作用。
我试过用overflow和transform: rotate();用不同的方式定位伪元素，但我就是不能让它起作用。

以下是我到目前为止的JSfiddle：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

.triangle {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0px 0 120vh 50vw;
  border-color: transparent transparent transparent green;
}

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

推荐答案

要保持所需的比例，可以将inline SVG与preserveAspectRatio="none"属性(see MDN)一起使用。这样，宽度和高度将固定为您使用的视区单位。
您可以使用polygon element创建三角形，使用linearGradient element用渐变填充三角形：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

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三角形的教程就到这里就结束了，希望趣模板源码网找到的这篇技术文章能帮助到大家，更多技术教程可以在站内搜索。