html直线渐变色,html – 具有2个渐变级别的线性渐变三角形(颜色停止)

据我所知,单独使用线性渐变背景图像无法做到这一点,因为直角三角形本身只显示为三角形,因为它对50％是透明的并且为休息填充.如果我们在此图层的顶部放置另一层从左到右的渐变,那么如果我们在左下方放置从左到右的渐变,则渐变将显示为三角形 – 右下角(或)的整个正方形区域此层也将显示整个方形区域,因为产生三角形的渐变的上半部分是透明的.因此,唯一的选择是(a)将上半部分设为“白色”并将第二个渐变放在其下方或(b)使用遮罩或剪辑路径隐藏上半部分.

使用SVG Mask：

由于CSS掩码和CSS剪辑路径目前都没有良好的浏览器支持.最好的选择是使用内联SVG作为掩码,如下面的代码片段.

.triangle-footer {

position: relative;

bottom: 0px;

height: 176px;

width: 100%;

}

.triangle-bottom-left {

position: absolute;

width: 40%;

height: 100%;

left: 0px;

bottom: 0px;

background: linear-gradient(to right top, rgba(94, 194, 82, 100) 50%, rgba(255, 255, 255, 0) 50%);

}

.triangle-bottom-right {

position: absolute;

width: 125%;

height: 140%;

right: 0px;

bottom: 0px;

}

svg {

position: relative;

right: 0px;

bottom: 0px;

width: 100%;

height: 100%;

}

polygon#right-triangle {

fill: url(#grad);

mask: url(#triangle);

}

使用SVG多边形:(也可以使用路径元素)

这也可以使用一个SVG多边形元素而不是下面的代码片段中的掩码来完成.我会留给你选择一个:)

.triangle-footer {

position: relative;

bottom: 0px;

height: 176px;

width: 100%;

}

.triangle-bottom-left {

position: absolute;

width: 40%;

height: 100%;

left: 0px;

bottom: 0px;

background: linear-gradient(to right top, rgba(94, 194, 82, 100) 50%, rgba(255, 255, 255, 0) 50%);

}

.triangle-bottom-right {

position: absolute;

width: 125%;

height: 140%;

right: 0px;

bottom: 0px;

}

svg {

position: relative;

right: 0px;

bottom: 0px;

width: 100%;

height: 100%;

}

polygon#right-triangle {

fill: url(#grad);

}

使用CSS Masks :(最适合您,因为Chrome是唯一的目标)

由于您已指示目标浏览器仅为Chrome并且其中支持CSS掩码,因此您还可以将-webkit-mask-image属性与线性渐变一起使用,如下面的代码段所示.我已经将它列为最后一个,因为对于使用不同浏览器要求查看此线程的任何其他用户,它是最不推荐的.

.triangle-footer {

position: relative;

bottom: 0px;

height: 176px;

width: 100%;

}

.triangle-bottom-left {

position: absolute;

width: 40%;

height: 100%;

left: 0px;

bottom: 0px;

background: linear-gradient(to right top, rgba(94, 194, 82, 100) 50%, rgba(255, 255, 255, 0) 50%);

}

.triangle-bottom-right {

position: absolute;

width: 125%;

height: 140%;

right: 0px;

bottom: 0px;

background: linear-gradient(to right, rgba(70, 70, 70, 0.15), rgba(255, 255, 255, 0));

-webkit-mask-image: linear-gradient(to top left, white 50%, transparent 50%);

}

使用CSS剪辑路径:(再次有用,因为Chrome是唯一的目标)

它可以使用CSS clip-path完成,如下面的代码片段所示.右下角元素被剪裁为所需的三角形形状,并且向其应用从左到右的渐变.

.triangle-footer {

position: relative;

bottom: 0px;

height: 176px;

width: 100%;

}

.triangle-bottom-left {

position: absolute;

width: 40%;

height: 100%;

left: 0px;

bottom: 0px;

background: linear-gradient(to right top, rgba(94, 194, 82, 100) 50%, rgba(255, 255, 255, 0) 50%);

}

.triangle-bottom-right {

position: absolute;

width: 125%;

height: 140%;

right: 0px;

bottom: 0px;

background: linear-gradient(to right, rgba(70, 70, 70, 0.15), rgba(255, 255, 255, 0));

-webkit-clip-path: polygon(0% 90%, 0% 100%, 100% 100%, 100% 0%);

}