如何移除尖角形状div中的垂直白色线条？

原问题代码 #

CSS #

.yourButton {
  position: relative;
  width: 200px;
  height: 40px;
  margin-left: 40px;
  color: #FFFFFF;
  background-color: blue;
  text-align: center;
  line-height: 40px;
}

.yourButton:before {
  content: "";
  position: absolute;
  right: 100%;
  top: 0px;
  width: 0px;
  height: 0px;
  border-top: 20px solid transparent;
  border-right: 40px solid blue;
  border-bottom: 20px solid transparent;
}

.yourButton:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0px;
  width: 0px;
  height: 0px;
  border-top: 20px solid transparent;
  border-left: 40px solid blue;
  border-bottom: 20px solid transparent;
}

HTML #

<div class="yourButton">You wanted this?</div>

问题分析 #

大尺寸/高DPI设备上出现的垂直白线，是浏览器渲染时的像素对齐精度问题：伪元素与主Div的衔接处，因边框计算的小数像素无法完全贴合，导致露出背景色缝隙。使用margin/padding调整会破坏形状的响应式适配，不是可行方案。

解决方案 #

通过微调伪元素的位置，让它与主Div轻微重叠，即可消除缝隙，同时不影响整体形状：

优化后的CSS（方案一：calc偏移） #

.yourButton {
  position: relative;
  width: 200px;
  height: 40px;
  margin-left: 40px;
  color: #FFFFFF;
  background-color: blue;
  text-align: center;
  line-height: 40px;
}

.yourButton:before {
  content: "";
  position: absolute;
  right: calc(100% - 1px); /* 向左偏移1px覆盖主元素边缘 */
  top: 0px;
  width: 0px;
  height: 0px;
  border-top: 20px solid transparent;
  border-right: 40px solid blue;
  border-bottom: 20px solid transparent;
}

.yourButton:after {
  content: "";
  position: absolute;
  left: calc(100% - 1px); /* 向右偏移1px覆盖主元素边缘 */
  top: 0px;
  width: 0px;
  height: 0px;
  border-top: 20px solid transparent;
  border-left: 40px solid blue;
  border-bottom: 20px solid transparent;
}

优化后的CSS（方案二：transform微调，兼容性更好） #

.yourButton {
  position: relative;
  width: 200px;
  height: 40px;
  margin-left: 40px;
  color: #FFFFFF;
  background-color: blue;
  text-align: center;
  line-height: 40px;
}

.yourButton:before {
  content: "";
  position: absolute;
  right: 100%;
  top: 0px;
  width: 0px;
  height: 0px;
  border-top: 20px solid transparent;
  border-right: 40px solid blue;
  border-bottom: 20px solid transparent;
  transform: translateX(-1px); /* 向左偏移1px覆盖缝隙 */
}

.yourButton:after {
  content: "";
  position: absolute;
  left: 100%;
  top: 0px;
  width: 0px;
  height: 0px;
  border-top: 20px solid transparent;
  border-left: 40px solid blue;
  border-bottom: 20px solid transparent;
  transform: translateX(1px); /* 向右偏移1px覆盖缝隙 */
}

这两种方法都能让伪元素与主Div无缝衔接，不会破坏响应式布局，完美解决高DPI屏幕下的白线问题。

内容的提问来源于stack exchange，提问作者アリ・ナディム