如何使用CSS线性渐变实现带侧边斜切的异形背景效果

核心实现原理 #

要实现路标样式的左右斜角灰色背景，不需要依赖clip-path之类的裁剪属性，直接利用线性渐变的硬截止色阶特性就能完成：

• 给灰色块设置两层不同角度的线性渐变，分别覆盖左右两侧的切角位置
• 切角区域设为透明，让相邻列的白色背景从透明位置透出，自然形成斜向的异形边界，全程不需要改动原有HTML结构

现有代码的问题 #

当前编写的线性渐变逻辑完全无法形成斜切效果：

• 渐变方向仅指向左下，仅能在单角落形成过渡，没法同时覆盖左右两侧的斜切轮廓
• 色停点设置把整个矩形块做了无意义的底色混合，元素本身还是标准矩形边界，没有形成异形的斜角

完整实现代码 #

保留原有的HTML结构不变，调整CSS逻辑即可实现目标效果：

.signpost {
  display: table;
  width: 100%;
  height: 100vh;
  border-collapse: collapse; /* 消除table-cell布局的默认列间隙 */
}
.signpost .column {
  display: table-cell;
  width: 33.33%;
  height: 100%;
  text-align: center;
}
/* 给左右两侧列设置白色底色 */
.signpost .column:first-child,
.signpost .column:last-child {
  background: #fff;
}
.bg-gray {
  /* 两层硬截止线性渐变，分别生成左右两侧的斜切边界 */
  background: 
    linear-gradient(120deg, transparent 0, #ededed 40px),
    linear-gradient(-120deg, transparent 0, #ededed 40px);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

自定义调整说明 #

• 渐变角度：可以根据需要的斜角陡缓修改，角度越接近90度，斜边越平缓；角度越接近180度，斜边越陡峭
• 色停点的像素值（代码中的40px）：控制斜切的深度，数值越大，斜边往灰色块内部延伸的长度越长，斜角视觉效果越明显
• 使用display: table-cell布局时，必须给父元素加border-collapse: collapse，否则列与列之间会出现默认间隙，斜切位置会露出多余白边

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