如何消除构成V形的两个CSS旋转矩形之间的拼接缝隙

反复调整transform-origin没法消掉缝隙很正常，因为缝隙的核心成因根本不是旋转锚点设置错误：

• 浏览器对旋转元素做抗锯齿渲染时，会在元素边缘自动生成半透明过渡像素，两个元素边缘对齐时，半透明像素叠在背景上就会显露出缝隙
• 原代码里宿主div没有固定宽高为0，两个伪元素的旋转基准点实际存在亚像素级的偏移，没法完全严丝合缝对齐

原有问题代码 #

CSS部分 #

div {
  position: relative;
  left: 100px;
  display: inline-block;
  margin-left: 100px;
}
div::before {
  content: '';
  position: absolute;
  transform: rotate(-45deg);
  transform-origin: bottom right;
  width: 20px;
  height: 100px;
  background: red;
}
div::after {
  content: '';
  position: absolute;
  transform: rotate(45deg);
  transform-origin: bottom left;
  width: 20px;
  height: 100px;
  background: red;
}

HTML部分 #

<div></div>

修复后完整代码 #

div {
  position: relative;
  left: 100px;
  display: inline-block;
  margin-left: 100px;
  /* 固定宽高为0，让两个伪元素的旋转锚点完全重合 */
  width: 0;
  height: 0;
}
div::before {
  content: '';
  position: absolute;
  transform: rotate(-45deg);
  transform-origin: bottom right;
  /* 偏移1px，和对侧元素产生1px重叠抵消缝隙 */
  right: -1px;
  width: 20px;
  height: 100px;
  background: red;
  /* 关闭背面渲染，减少边缘半透明插值 */
  backface-visibility: hidden;
}
div::after {
  content: '';
  position: absolute;
  transform: rotate(45deg);
  transform-origin: bottom left;
  /* 偏移1px，和对侧元素产生1px重叠抵消缝隙 */
  left: -1px;
  width: 20px;
  height: 100px;
  background: red;
  backface-visibility: hidden;
}

<div></div>

关键调整点 #

• 宿主div宽高设为0，彻底消除定位基准的偏移，保证两个伪元素的旋转锚点落在同一个像素点上
• 给两个伪元素各加1px的反向偏移，让衔接位置产生1px的重叠，完全覆盖抗锯齿产生的半透明缝隙，不会破坏V形的等腰对称效果
• 加backface-visibility: hidden属性，减少不同浏览器、不同DPI屏幕下的渲染差异，避免缝隙复现

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