使用linear-gradient实现按钮hover双色背景效果的问题咨询

可以确认该需求完全可通过linear-gradient实现，你当前代码的问题出在渐变颜色断点的参数逻辑错误：linear-gradient的色标位置是按从小到大的顺序生效的，若后一个色标的位置值小于前一个，会自动以前一个色标的位置作为自身起始点，因此会出现不符合预期的渲染效果。

修正后代码 #

CSS 部分 #

.triangle {
  /* 可选：添加过渡效果让背景切换更自然 */
  transition: background 0.3s ease;
}
.triangle:hover{
  /* 标准语法：-45度角，前50%区域为红色，50%位置开始直接切换为黄色，实现硬边双色分割 */
  background: linear-gradient(-45deg, red 50%, yellow 50%);
  /* 兼容旧版WebKit内核浏览器 */
  background: -webkit-linear-gradient(-45deg, red 50%, yellow 50%);
}

HTML 部分 #

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

扩展说明 #

• 如果你需要柔和的颜色渐变混合效果，只需要调整第二个色标的位置值即可，例如linear-gradient(-45deg, red 30%, yellow 70%)，会在30%到70%的区域产生红到黄的渐变过渡
• 如果你需要调整双色的占比，修改两个色标的共同位置值即可，例如red 30%, yellow 30%就会实现红色占30%、黄色占70%的分割效果

内容的提问来源于stack exchange，提问作者Developer