linear-gradient做斜边效果linear-gradient做斜边linear-gradient做斜边line

效果

<div class="banner-style"></div>

.banner-style {
  height: 80px;
  width: 100%;

  /*
   * 核心技巧：
   * 在颜色切换的地方，后一个颜色的起始位置比前一个颜色的结束位置多 1px。
   * 例如：红色在 35% 结束，白色则在 calc(35% + 1px) 开始。
   * 这 1px 的微小渐变带就是消除锯齿的关键。
   */
  background: linear-gradient(
    115deg,
    /* 红色区域 */
    #DB4437 0%,
    #DB4437 35%,

    /* 白色斜线区域 (注意这里的 calc) */
    #FFFFFF calc(35% + 1px), /* 从 35% 往后挪 1px 开始，形成平滑过渡 */
    #FFFFFF 38%,

    /* 深灰色区域 (同样应用 calc) */
    #3C3C3C calc(38% + 1px), /* 从 38% 往后挪 1px 开始 */
    #3C3C3C 100%
  );
}