:before 容器上的伪元素有一个白色边框

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 的代码相同，只是变换原点和 z-index: 1 不同，以便与下一个容器重叠。

Answer 1

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

:before 容器上的伪元素有一个白色边框

:before pseudo-element on container has a white border

html

css

lines

elements

diagonal