Question

I am trying to create a page layout with a rectangular div on the left side that’s rotated 10 degrees, expands with the size of the browser, and doesn’t show its edge on the top, left, and bottom. Meaning, the page should appear to be split in the middle on a slant.

My code so far creates the div properly, but when I expand the page you begin to see the edges.

http://jsfiddle.net/jpQvL/1/

HTML

 <div id="wrapper">
    <div id="right"></div>
 </div>

CSS

html, body {
   margin: 0;
   padding: 0;
   height: 100%;
 }

#wrapper {
    position:relative;
    height: 100%;
   }    

#right {
    background: #000;
    transition: all 0.5s ease-in-out 0s;
    width: 50%;
    position: fixed;
    min-height: 110%;
    transform: rotate(10deg);
    top: -73px;
}

Answer 1

The problem is that the tranform property needs render prefixes. You have to add these lines:

-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);

take a look at this

or use one of many prefix-free scripts like this one