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

Question

我在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

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

Answer 1

这是在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>

Answer 2

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

left: 200px;

使用：

left 199px;

请参阅下面的代码：

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

＆＃13;

＆＃13;

.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%;

}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;