：容器上的伪元素之前有一个白色边框

Question

我使用：before和：after伪元素创建一个容器的对角线。

那些伪元素似乎有一个白底边框，我无法解释。

代码如下：

#sobre:before {
    position: absolute;
    display: block;

    width: 100%;
    height: 6em;

    background: inherit;

    content: '';

    transform: skewY(-2deg);
    -webkit-transform: skewY(-2deg);
    -moz-transform: skewY(-2deg);
    -ms-transform: skewY(-2deg);

    transform-origin: -100%;
    -webkit-transform-origin: -100%;
    -moz-transform-origin: -100%;
    -ms-transform-origin: -100%;
}

代码：after是相同的，只是使用不同的transform-origin和z-index：1，它与下一个容器重叠。

Answer 1

这是由CSS转换引起的Chrome中常见的抗锯齿问题，将-webkit-backface-visibility: hidden;添加到您的:after和:before元素。