我正在尝试实现一个充满渐变的三角形。三角形应位于页面的左上角，并拉伸水平视口的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>为了保持所需的比例，可以使用带有属性的嵌入式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>本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句