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

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;

查看下面的代码片段：

注意！您可能还想将元素的宽度增加 1 像素以保持准确的尺寸。

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

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

How to remove the white edges that appear in between two skewed elements?

html

css

google-chrome

css-transforms