I have been experimenting with using the :before and :after pseudo-elements to generate diagonal lines within a container.
However, I am encountering an issue where these pseudo-elements appear to have a white bottom border, and I am unable to determine the cause of this unexpected behavior.
https://i.sstatic.net/ggJ7A.jpg
The code snippet responsible for creating these diagonal lines is shown below:
#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 the :after pseudo-element essentially mirrors that of the :before element, with slight modifications including a different transform-origin property value and a z-index set to 1 in order to stack it above the following container.