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

我使用：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%; 
}

的代码：后是相同的，只是具有不同的变换原点和的z-index：1为它以重叠下一个容器。

来源

2016-12-15 Ricardo Jerónimo

你能发表一个证明这个问题的[mcve]吗？ –

有没有可能：之后和：之前在css中定义的其他地方？尝试添加border：none到#sobre：在 – Kantoci

之前可能是抗锯齿或亚像素渲染。 –

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

来源

2016-12-15 15:26:57 Kantoci

如果你包括一些权威来源，这个答案会更加棒。 –

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

回答

相关问题