Angled Edges Top and Bottom - html

Question

I'm facing the following issue with my angled top and bottom div. It should be something like on the picture which I'm providing here. I want to use before pseudo element for the top part of the div and after for the bottom part of the div and the bottom is kinda working but I have only problem with the top.
Any ideas how I can accomplish that effect using my code?
I want it to look like this:
Here's what I have so far:
.example {
width: 100%;
height: 700px;
position: relative;
background: red;
}
.example:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: inherit;
z-index: -1;
bottom: 0;
transform-origin: left bottom;
transform: skewY(-10deg);
}
.example:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: inherit;
z-index: -1;
top: 0;
transform-origin: top left;
transform: skewY(5deg);
}
<div class="example">
<h1>SOME CONTENT</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit eius excepturi at voluptates, est enim amet. Architecto eaque est assumenda, placeat ipsam repellendus atque nihil dolores, eos, commodi, provident sunt. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. In dicta ut corrupti beatae maiores, officiis saepe omnis voluptatem facilis eveniet ex voluptate, ipsam libero! Recusandae ipsam, provident quam enim rem!</p>
<h2>More Content</h2>
</div>
View on JSFiddle

Answer 1

The issue you are having is due to the position:absolute setting of the pseudo-elements (before/after). When you set the position to absolute the element no longer has any container boundaries to conform to and is positioned based on the html body left,right,top and bottom values.
Now your main container example div's position starts from the top and your after pseudo element needs to be a bit above it to show the angled background but as the pseudo element is not a block element to actually move the main div down due to it's position:absolute setting. You need to add top margin to move the main div down so that the pseudo element set above it is shown.
Here is another way of doing it using css border properties instead of css3 transform property.
https://codepen.io/Nasir_T/pen/GNKLNQ
Hope this explains you the reason of using margins to adjust absolute positioned pseudo-elements.

Answer 2

I added a 150px of margin to the top of you div
EDIT I also changed the skew degree to -5% and 5% rather than +-10%
.example {
width: 100%;
h height: 700px;
position: relative;
background: red;
margin-top: 150px;
}
.example:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: inherit;
z-index: -1;
bottom: 0;
transform-origin: left bottom;
transform: skewY(-5deg);
}
.example:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
background: inherit;
z-index: -1;
top: 0;
transform-origin: top left;
transform: skewY(5deg);
}

Answer 3

I think it'd be easiest to skew white divs in :before and :after and then use z-index to bring your content to the front like so. Also added a margin-top to h1 which can be adjusted as needed.
.example {
width: 100%;
height: 700px;
position: relative;
background: red;
overflow: hidden;
}
.example:after {
content: "";
width: 110%;
height: 25%;
top: 0;
position: absolute;
background: white;
z-index: 1;
transform-origin: left bottom;
transform: skewY(-5deg);
}
.example:before {
content: "";
width: 110%;
height: 25%;
bottom: 0;
position: absolute;
background: white;
z-index: 1;
transform-origin: left bottom;
transform: skewY(5deg);
}
.example h1, .example p {
position: relative;
z-index: 5;
}
.example h1 {
margin-top: 205px;
}
<div class="example">
<h1>SOME CONTENT</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit eius excepturi at voluptates, est enim amet. Architecto eaque est assumenda, placeat ipsam repellendus atque nihil dolores, eos, commodi, provident sunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit. In dicta ut corrupti beatae maiores, officiis saepe omnis voluptatem facilis eveniet ex voluptate, ipsam libero! Recusandae ipsam, provident quam enim rem!</p>
<h2>More Content</h2>
</div>

Answer 4

IF there's a static width, the effect is a LOT easier to create & control using borders:
.example {
width: 500px;
height: 700px;
position: relative;
background: red;
padding:100px 0px;
}
.example:after,
.example:before {
content:'';
position:absolute;
border-right:solid 500px transparent;
}
.example:before {
top:0px;
border-top:solid 100px #FFF;
}
.example:after {
bottom:0px;
border-bottom:solid 100px #FFF;
}
<div class="example">
<h1>SOME CONTENT</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit eius excepturi at voluptates, est enim amet. Architecto eaque est assumenda, placeat ipsam repellendus atque nihil dolores, eos, commodi, provident sunt. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. In dicta ut corrupti beatae maiores, officiis saepe omnis voluptatem facilis eveniet ex voluptate, ipsam libero! Recusandae ipsam, provident quam enim rem!</p>
<h2>More Content</h2>
</div>