Search code examples
htmlcsslineselementdiagonal

:before pseudo-element on container has a white border

I'm using the :before and :after pseudo-elements to create diagonal lines a container.

What happens is that those pseudo-elements seem to have a white bottom border, which I cannot explain.

enter image description here

The code is as follows:

#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%;
}

The code for :after is the same, just with a different transform-origin and a z-index: 1 for it to overlap the next container.

Solution

  • This is common antialiasing issue in Chrome caused by CSS transforms, add -webkit-backface-visibility: hidden; to your :after and :before elements.