浏览器缩放致HTML/CSS元素出现线条伪影，求非SVG修复方案

问题概述 #

使用CSS边框为红色矩形制作两端三角形时，浏览器非100%缩放（如1.5x）会导致元素顶部出现红色线条伪影，这是浏览器像素舍入计算误差引发的。以下是无需改用SVG的几种可行修复技巧：

修复技巧 #

1. 微调伪元素定位与尺寸，覆盖缝隙 #

通过让伪元素略微超出主元素范围，填补像素舍入产生的间隙：

#jss {
  display: flex;
  position: absolute;
  background: red;
  top: 40px;
  width: 110px;
  opacity: 80%;
  height: 20px;
  overflow: hidden; /* 可选，避免伪元素超出影响其他元素 */
}

#jss::before {
  left: 0;
  width: 0;
  bottom: -1px; /* 向下偏移1px覆盖顶部缝隙 */
  height: 0;
  content: '';
  position: absolute;
  transform: rotate(180deg);
  border-top: 11px solid white; /* 上下边框各扩大1px */
  border-left: 10px solid #00007f;
  border-bottom: 11px solid white;
}

#jss::after {
  right: 0;
  width: 0;
  bottom: -1px; /* 同步向下偏移 */
  height: 0;
  content: '';
  position: absolute;
  border-top: 11px solid white;
  border-left: 10px solid #7f0000;
  border-bottom: 11px solid white;
}

原理：扩大伪元素边框尺寸并调整定位，让伪元素完全覆盖主元素边缘，消除像素间隙。

2. 触发硬件加速优化渲染 #

使用transform: translateZ(0)触发GPU硬件加速，提升像素渲染精度：

#jss {
  display: flex;
  position: absolute;
  background: red;
  top: 40px;
  width: 110px;
  opacity: 80%;
  height: 20px;
  transform: translateZ(0); /* 触发硬件加速 */
}

原理：GPU渲染对亚像素定位的处理更精准，减少CPU计算舍入导致的伪影。

3. 用内阴影掩盖缝隙 #

给主元素添加同色内阴影，填充可能出现的1px缝隙：

#jss {
  display: flex;
  position: absolute;
  background: red;
  top: 40px;
  width: 110px;
  opacity: 80%;
  height: 20px;
  box-shadow: inset 0 1px 0 red; /* 顶部内阴影 */
}

原理：内阴影会覆盖顶部的细微缝隙，视觉上消除伪影。

4. 统一整数像素尺寸与定位 #

确保元素尺寸、边框尺寸及定位值均为整数，减少缩放时的舍入冲突：

#jss {
  top: 40px; /* 保持整数定位 */
  height: 20px; /* 偶数高度 */
}

#jss::before, #jss::after {
  border-top: 10px solid white; /* 与主元素高度的一半完全匹配 */
  border-bottom: 10px solid white;
}

原理：整数像素的尺寸和定位能降低浏览器缩放时的亚像素计算误差。

5. 用clip-path替代边框制作形状 #

通过CSS clip-path直接绘制带三角形的整体形状，避免边框拼接的缝隙：

#jss {
  display: flex;
  position: absolute;
  background: red;
  top: 40px;
  width: 110px;
  opacity: 80%;
  height: 20px;
  clip-path: polygon(10px 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
}

#jss::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 100%;
  background: #00007f;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

#jss::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 10px;
  height: 100%;
  background: #7f0000;
  clip-path: polygon(100% 0, 0 50%, 100% 100%);
}

原理：clip-path基于路径绘制形状，不存在边框拼接的像素缝隙问题，渲染更统一。

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