带渐变的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用渐变填充三角形:
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>
相关文章