如何使用CSS渐变属性实现按钮半背景色且渐变边缘带圆角效果

云原生阿岚

2026-9-27

实现方案

该效果完全可以通过CSS Gradient属性实现，无需新增额外DOM节点，仅需要调整原有渐变逻辑、叠加径向渐变做圆弧过渡即可。

核心思路

保留原有的斜向分色逻辑，将硬边缘的色标替换为带小范围过渡的配置
叠加4个定位在分界转角位置的径向渐变，模拟圆润的弧形边缘
新增CSS变量控制圆弧半径，可灵活调整边缘圆润度

完整实现代码

HTML

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

CSS

.triangle{
  padding: 20px 40px;
  border: none;
  font-size: 16px;
  cursor: pointer;
  /* 可自定义变量 */
  --color1: red;
  --color2: yellow;
  --split-offset: 30%; /* 分界左右偏移量 */
  --arc-radius: 6px; /* 边缘圆弧半径，数值越大圆弧越明显 */
  background: 
    /* 上左圆弧 */
    radial-gradient(circle at calc(50% + var(--split-offset)) calc(var(--arc-radius) * -1), transparent var(--arc-radius), var(--color2) calc(var(--arc-radius) + 1px)) top left,
    /* 上右圆弧 */
    radial-gradient(circle at calc(50% - var(--split-offset)) calc(var(--arc-radius) * -1), transparent var(--arc-radius), var(--color1) calc(var(--arc-radius) + 1px)) top right,
    /* 下左圆弧 */
    radial-gradient(circle at calc(50% + var(--split-offset)) calc(100% + var(--arc-radius)), transparent var(--arc-radius), var(--color1) calc(var(--arc-radius) + 1px)) bottom left,
    /* 下右圆弧 */
    radial-gradient(circle at calc(50% - var(--split-offset)) calc(100% + var(--arc-radius)), transparent var(--arc-radius), var(--color2) calc(var(--arc-radius) + 1px)) bottom right,
    /* 基础斜向分色层 */
    linear-gradient(135deg, var(--color1) 50%, var(--color2) 50%);
  background-size: 51% 51%, 51% 51%, 51% 51%, 51% 51%, 100% 100%;
  background-repeat: no-repeat;
}