prevent scrolling from left to right when slanting div - css

Question

I've searched on here and could not find an answer so I apologise if this has been asked before.
Anyway, im creating a website, and one of the effects im using is a slanting div effect.
But when i create it using the transform, rotate and skew for some reason it makes the website scroll from left to right.
Ive tried putting the overflow to hidden on the parent div but it then hides the slanting effect.
Here is my code...
Html:
<div class="container">
<div class="slant"></div>
<!-- rest of the code goes here -->
</div>
Css:
.container{width:100%;position:relative;}
.slant{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: -45px;
position: absolute;
width: 100%;
background-color: inherit;
left: 0;
height: 120px;
overflow: hidden;
z-index: 200;
-webkit-transform: rotate(-2deg) skew(-2deg) scale(1.1,1);
-mox-transform: rotate(-2deg) skew(-2deg) scale(1.1,1);
-ms-transform: rotate(-2deg) skew(-2deg) scale(1.1,1);
-o-transform: rotate(-2deg) skew(-2deg) scale(1.1,1);
transform: rotate(-2deg) skew(-2deg) scale(1.1,1);
}
Ive heard you can do this with ::before pseudo-elements but to be honest I dont know how and cant seem to find a tutorial to show me.
Any help is welcome and will be appreciated
Thanks

Answer 1

Do you use scale(1.1,1) for some strong reason?
You can remove it, and also remove default margin and padding from body, so that container shrinks to the width of the browser. Then everything works (tested in Chrome, FF, IE11).
Your css will look like this:
body {margin:0px;padding:0px;}
.container{width:100%;position:relative;}
.slant{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
top: -45px;
position: absolute;
width: 100%;
background-color: inherit;
left: 0;
height: 120px;
overflow: hidden;
z-index: 200;
width:100%;
-webkit-transform: rotate(-2deg) skew(-2deg) ;
-mox-transform: rotate(-2deg) skew(-2deg) ;
-ms-transform: rotate(-2deg) skew(-2deg);
-o-transform: rotate(-2deg) skew(-2deg) ;
transform: rotate(-2deg) skew(-2deg);
background-color: red;
}