If you have the content as child of the rotated box , they will both grow according to content.
What you need is to set reversed rotation to child , so it sets back somehow to normal position. http://codepen.io/anon/pen/HrceA
.content-outer {
margin:2em 0;
}
.extended {
background:gray;
padding:1em 0;
transform:rotate(-2deg);
}
.content-inner {
transform:rotate(2deg);/* opposite rotation makes to have 0deg rotation at screen*/
background:#00FF00;
padding:1em;
}
<div class="content-outer">
<div class="extended rotation">
<div class="content-inner">
Content comes here
</div>
</div>
</div>
.content-outer
could be the one rotated to avoid extra div
for extra class
:)
EDIT
transform:skewY(2deg);
works too :
.extended {
background:gray;
padding:1em 0;
transform:skewy(-2deg);
}
.content-inner {
transform:skewy(2deg);
background:#00FF00;
padding:1em;
}