Fullwidth div rotation doesn't take maximum width - html

Question

I'm trying to make a full width rotated header but the problem is that when I rotate it in the right corner of the header it has a space. I've made a jsfiddle to understand my problem better. I'm trying hours and hours many methods but nothing worked. Thank you
#header {
background: rgba(255,0,0,0.7);
height: 150px;
transform: rotate(356deg) ;
-webkit-transform: rotate(356deg) ;
-moz-transform: rotate(356deg) ;
-o-transform: rotate(356deg) ;
-ms-transform: rotate(356deg) ;
-webkit-transform-origin: bottom left;}
http://jsfiddle.net/SAVw6/

Answer 1

I believe that this is what you want:
Fiddle: http://jsfiddle.net/SAVw6/5/
HTML:
<div id="container"><div id="header"></div><div>
CSS:
#header {
background: rgba(255,0,0,0.7);
height: 150px;
transform: rotate(356deg) ;
-webkit-transform: rotate(356deg) ;
-moz-transform: rotate(356deg) ;
-o-transform: rotate(356deg) ;
-ms-transform: rotate(356deg) ;
-webkit-transform-origin: bottom left;
width: 130%;
margin-left: -20%;
}
#container {
overflow: hidden;
width: 100%;
}
The container prevents any excess horizontal scrolling
The width is extended above 100% in order for it to continue on to the right and left.
The margin-left is set to negative in order for it to continue to the left instead of only to the right.
Your -webkit-transform-origin: bottom left; CSS code is specifically targeting Chrome and no other browsers. For cross-browser support, you can use:
-webkit-transform-origin: bottom left;
-ms-transform-origin: bottom left;
transform-origin: bottom left;