如何去除出现在两个倾斜元素之间的白边？答案

【问题标题】：How to remove the white edges that appear in between two skewed elements?如何去除出现在两个倾斜元素之间的白边？
【发布时间】：2016-07-17 05:48:39
【问题描述】：

我在 Chrome 浏览器上看到倾斜的 HTML div 之间有一条白线。下面是问题的截图：

代码如下：

.abc {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  backface-visibility: hidden;
  width: 200px;
  height: 200px;
  background: green;
  position: absolute;
  left:0px;
  transform: skewX(-10deg);
  transform-origin: 0% 100%;
}

.def {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  backface-visibility: hidden;
  width: 200px;
  height: 200px;
  background: green;
  position: absolute;
  left:200px;
  transform: skewX(-10deg);
  transform-origin: 0% 100%;

}

调试示例位于：https://jsbin.com/dijazit/2/edit?html,css,output

我们如何删除这条白线？在这里感谢任何帮助。

【问题讨论】：

欢迎来到 Stack Overflow！寻求代码帮助的问题必须包含在问题本身中重现它所需的最短代码。虽然您提供了link to an example，但如果链接失效，您的问题对于未来遇到同样问题的其他 SO 用户将毫无价值。
给你的第二个 div -199px 而不是 -200 这不是一个解决方案吗？然后铬不再有白线。这将是一个快速但肮脏的解决方法。
感谢@Paulie_D，已更新代码。
非常感谢@Harry，这似乎解决了它！
@moondram 在我阅读了该帖子并尝试了所有答案之后，似乎它们都没有工作......奇怪。我给哈利打了一针，它奏效了。我得记住那个以备后用！

标签： html css google-chrome css-transforms

【解决方案1】：

我会将第二个元素向左移动一个像素。所以而不是：

left: 200px;

使用：

left 199px;

参见下面的 sn-p：

注意！您还可以将元素的宽度增加 1px 以保持精确的尺寸。

.abc {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  backface-visibility: hidden;
  width: 200px;
  height: 200px;
  background: green;
  position: absolute;
  left:0px;
  transform: skewX(-10deg);
  transform-origin: 0% 100%;
}

.def {
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility:    hidden;
  backface-visibility: hidden;
  width: 200px;
  height: 200px;
  background: green;
  position: absolute;
  left:199px;
  transform: skewX(-10deg);
  transform-origin: 0% 100%;

}

<div class="abc"></div>
<div class="def"></div>

【讨论】：

【解决方案2】：

这是关于在 Chrome 中渲染转换元素的一个已知问题。更奇怪的是，我们遇到了许多类似的问题，并且每次针对前一个（非常相似）案例应用的修复程序最终都不适用于当前案例。

对于这种特殊情况，在元素周围添加一个透明的 1 像素边框似乎可以解决问题。

.abc {
  position: absolute;
  left: 0px;
  width: 200px;
  height: 200px;
  background: green;
  transform-origin: 0% 100%;
  transform: skewX(-10deg);
  border: 1px solid transparent;
}
.def {
  position: absolute;
  left: 200px;
  width: 200px;
  height: 200px;
  background: green;
  transform-origin: 0% 100%;
  transform: skewX(-10deg);
  border: 1px solid transparent;
}

<div class="abc"></div>
<div class="def"></div>

【讨论】：