使用CSS skew属性时出现像素瑕疵的解决方法求助

问题说明 #

← 此处为存在像素瑕疵的图片

在使用CSS的skew属性时，倾斜的灰色边框与底部灰色边框的连接处出现了像素瑕疵，视觉上类似轮廓（outline）或盒阴影（box-shadow），但用outline:0;box-shadow:0;代码无法解决这个问题，求可行的解决办法。

相关核心代码示例：

/* 基于原提问代码简化 */
.container {
  position: relative;
  width: 300px;
  padding: 20px;
  border-bottom: 1px solid #ddd;
}
.container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 100%;
  background-color: #ddd;
  transform: skewX(-15deg);
}

可行解决方法 #

这类问题大多是CSS变换渲染时的抗锯齿bug，试试下面几种方案：

• 触发硬件加速优化渲染：给倾斜的伪元素添加translateZ(0)，让GPU参与渲染，改善边缘抗锯齿：

  .container::before {
    transform: skewX(-15deg) translateZ(0);
  }
  

• 用同色伪元素覆盖瑕疵：在边框拼接处加一个小尺寸的同色伪元素，直接盖住瑕疵：

  .container::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 3px;
    height: 1px;
    background-color: #ddd;
    z-index: 2;
  }
  

• 调整变换原点：把倾斜元素的变换原点设为底部左侧，让变换从拼接处开始，减少错位：

  .container::before {
    transform-origin: bottom left;
    transform: skewX(-15deg);
  }
  

• 改用clip-path实现倾斜边框：放弃多边框拼接，用clip-path直接绘制带倾斜的边框结构，避免拼接问题：

  .container {
    clip-path: polygon(15px 0, 100% 0, 100% 100%, 0 100%);
    border-left: 1px solid #ddd;
    border-bottom: 1px solid #ddd;
  }
  

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