使用线性渐变在按钮上设置背景颜色
Having a background color set up on a button using linear gradient
我需要一个按钮,悬停时该按钮应显示两种颜色。我能够将颜色混合到一定程度,但无法生成准确的 one.Below 是我的代码,
.triangle:hover{
background: -webkit-linear-gradient(-45deg, red 50%,yellow 20%);
}
<button class='triangle'>
Linear Check
</button>
使用上面的方法,我可以生成下面这样的图像
请告诉我这是否可行并且可以使用线性渐变实现。
提前致谢
你可以用 2 个圆锥渐变来完成。
.triangle{
padding:20px;
border:none;
--g:red 135deg,yellow 0; /* the coloration */
--p:30%;/* the position */
background:
conic-gradient(from -180deg at 50% var(--p) ,var(--g)) top,
conic-gradient(from -135deg at 50% calc(100% - var(--p)),var(--g)) bottom;
background-size:100% 51%;
background-repeat:no-repeat;
}
<button class='triangle'>
some content
</button>
<button class='triangle' style="--p:60%">
some content
</button>
<button class='triangle' style="--p:20%;--g:blue 135deg,pink 0">
some content
</button>
最好使用rgba()
或hsl
或HEX:
background: linear-gradient(deg or (from to),rgba(),rgba());
我需要一个按钮,悬停时该按钮应显示两种颜色。我能够将颜色混合到一定程度,但无法生成准确的 one.Below 是我的代码,
.triangle:hover{
background: -webkit-linear-gradient(-45deg, red 50%,yellow 20%);
}
<button class='triangle'>
Linear Check
</button>
使用上面的方法,我可以生成下面这样的图像
请告诉我这是否可行并且可以使用线性渐变实现。 提前致谢
你可以用 2 个圆锥渐变来完成。
.triangle{
padding:20px;
border:none;
--g:red 135deg,yellow 0; /* the coloration */
--p:30%;/* the position */
background:
conic-gradient(from -180deg at 50% var(--p) ,var(--g)) top,
conic-gradient(from -135deg at 50% calc(100% - var(--p)),var(--g)) bottom;
background-size:100% 51%;
background-repeat:no-repeat;
}
<button class='triangle'>
some content
</button>
<button class='triangle' style="--p:60%">
some content
</button>
<button class='triangle' style="--p:20%;--g:blue 135deg,pink 0">
some content
</button>
最好使用rgba()
或hsl
或HEX:
background: linear-gradient(deg or (from to),rgba(),rgba());