Webkit浏览器下CSS渐变实现斜切角按钮中间出现垂直黑条问题

该问题是WebKit内核浏览器的背景渲染精度缺陷导致的：你将两个渐变背景的宽度各设为50%，当元素宽度为奇数像素时，浮点计算后两个背景总宽度会小于元素实际宽度，中间出现1px的空隙。同时你代码里第一条纯色背景声明被后面的多背景声明覆盖了，空隙会透出父元素的背景色，也就表现为你看到的黑色竖线。火狐浏览器的渲染逻辑对这种场景做了兼容，所以不会出现该问题。

方案1：微调背景尺寸（最快捷，无视觉影响） #

将background-size的宽度值从50%改为略大于50%的数值（比如50.1%），让两个渐变背景轻微重叠，重叠部分颜色完全一致，不会影响视觉效果，同时彻底消除空隙。
修改后的CSS代码如下：

.button {
  background: #007FEE;
  background: linear-gradient(135deg, transparent 10px, #007FEE 0) top left, 
              linear-gradient(225deg, transparent 10px, #007FEE 0) top right;
  background-size: 50.1% 100%; /* 仅修改这一行即可 */
  background-repeat: no-repeat;
  color: #000;
  height: 40px;
}

方案2：改用clip-path实现切角（更稳定，无兼容性隐患） #

如果需要更稳妥的实现，可以放弃多背景拼接的方案，直接用clip-path属性裁剪出左上角和右上角的切角效果，完全避免拼接带来的渲染问题：

.button {
  background: #007FEE;
  color: #000;
  height: 40px;
  /* 五个坐标点依次是：左上切角结束点、右上顶点、右下顶点、左下顶点、左上切角起始点 */
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}

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