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

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>