使用线性渐变在按钮上设置背景颜色答案

【问题标题】：Having a background color set up on a button using linear gradient使用线性渐变在按钮上设置背景颜色
【发布时间】：2021-12-17 20:58:02
【问题描述】：

我需要有一个按钮，它在悬停时应该显示两种颜色。我能够将颜色混合到一定程度，但无法产生确切的颜色。下面是我的代码，

.triangle:hover{
background: -webkit-linear-gradient(-45deg, red 50%,yellow 20%);
}

<button class='triangle'>
  Linear Check 
</button>

使用上面的方法，我可以在下面生成这样的图像

请让我知道这是否可行并且可以使用线性渐变来实现。提前致谢

【问题讨论】：

这里有什么问题？因为我觉得你已经回答了？

标签： html css linear-gradients

【解决方案1】：

最好使用rgba()或hsl或HEX：

background: linear-gradient(deg or (from to),rgba(),rgba());

【讨论】：

我最初尝试实际使用线性渐变，但无法更改渐变颜色的边框。在我的情况下，红色渐变需要具有与图像相似的弯曲边缘，但需要弯曲边缘而不是比锐化一个
@developer 如果这是一个新问题，请提出一个新问题 ;)
只需将边框属性设置为未设置即可； .triangle:hover{ 背景：-webkit-linear-gradient(-45deg, red 50%, yellow 20%);边框：未设置； }

【解决方案2】：

你可以用 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>

【讨论】：

是否可以让边缘弯曲（红色渐变）而不是尖锐的边缘？
@Developer 像这样：jsfiddle.net/sh0x5zvL ?
"i.stack.imgur.com/LvAw7.jpg".This 是我想要实现的渐变形状。谢谢
如果你能帮我解决这个问题。一直坚持这个。也可以使用渐变来实现。