CODEWITHSUNDEEP
htmlcss
MG1
MG1

Reputation: 1687

Expandable div that's rotated with css

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;
}

Upvotes: 1

Views: 152

Answers (1)

Daniel Kurz
Daniel Kurz

Reputation: 816

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

Upvotes: 3

Related Questions