Skewing a background the opposite way round - css

Question

I've never felt so silly asking a SO question... but here is goes.
I've created a skew which works a charm, see here
.skewed-bg {
background: #E7ADBB;
padding: 200px 0;
transform: skew(0deg, -7deg);
margin-top: -200px;
z-index: 0;
color: white;
}
.skew-lb {
padding-bottom: 50px !important;
}
.content {
transform: skew(0deg, 7deg);
text-align: center;
}
<div class="skewed-bg skew-lb">
<div class="content">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10 text-center">
<h1 class="h1 hero-title mb-3">Everything you need to know about...</h1>
</div>
</div>
</div>
</div>
</div>
But when I try to make the skew the opposite way round, everything just turns into mayhem and I have no idea why this is happening - surely it's just reversing the numbers of the skew around? This is my code...
.skewed-bg {
background: #E7ADBB;
padding: 200px 0;
transform: skew(-7deg, 0deg);
margin-top: -200px;
z-index: 0;
color: white;
}
.skew-lb {
padding-bottom: 50px !important;
}
.content {
transform: skew(7deg, 0deg);
text-align: center;
}
<div class="skewed-bg skew-lb">
<div class="content">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10 text-center">
<h1 class="h1 hero-title mb-3">Everything you need to know about...</h1>
</div>
</div>
</div>
</div>
</div>
Can somebody put me out of my misery here? PS- I apologise in advance for being a plonker.

Answer 1

The reason it doesn't work is because skew(ax, ay). If you simply reversed the angles, you would be changing x-axis instead of y-axis. So use an inverse angle instead. 7deg becomes -7deg
Read about skew here.
Do it like this:
.skewed-bg {
background: #E7ADBB;
padding: 200px 0;
transform: skew(0deg, 7deg);
margin-top: -200px;
z-index: 0;
color: white;
}
.skew-lb {
padding-bottom: 50px !important;
}
.content {
transform: skew(0deg, -7deg);
text-align: center;
}
<div class="skewed-bg skew-lb">
<div class="content">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10 text-center">
<h1 class="h1 hero-title mb-3">Everything you need to know about...</h1>
</div>
</div>
</div>
</div>
</div>

Answer 2

Here is an example of how you can achieve the same result using :before selector. Less nesting.
.container {
text-align: center;
height: 300px;
width:900px;
position: relative;
overflow: hidden;
margin: 0 auto;
}
.container:before {
content: "";
position: absolute;
background: darkOrange;
height:100%;
width: 200%;
transform: rotate(15deg);
top: -35%;
left: -25%;
z-index: -1;
}
h1 {
z-index: 1;
color: white;
width: 100%;
line-height: 120px;
text-align: center;
}
<div class="container">
<h1>Exmaple </h1>
</div>
Using this method, the text will not be skewed

Answer 3

change the -7 into a 7 in the skew
and for the content flip them over so ts like this skew(0deg, -7deg)
.skewed-bg {
background: #E7ADBB;
padding: 200px 0;
transform: skew(0deg, 7deg);
margin-top: -200px;
z-index: 0;
color: white;
}
.skew-lb {
padding-bottom: 50px !important;
}
.content {
transform: skew(0deg, -7deg);
text-align: center;
}
<div class="skewed-bg skew-lb">
<div class="content">
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-md-10 text-center">
<h1 class="h1 hero-title mb-3">Everything you need to know about...</h1>
</div>
</div>
</div>
</div>
</div>