旋转div但可防止窗口边界溢出

Question

I want to rotate a div by say 7deg. This div though should fill the entire space left, right and to the bottom. Like this:

 _____________________
|                     | <- body
|                  __-| <- rotated div border
|            __----   |
|      __----         |
|__----               | <- rotated div
|                     |
|                     |
|---------------------| <- window bottom
|        scroll       | 
|          |          |
|          v          | <- still rotated div filling the space
|_____________________|

You should be able to scroll down and you should not be able to scroll to the right.

Is there a html/css solution? Or maybe I need jquery or something?

Edit: The rotated div doesn't actually need to fill all the space down to the bottom. There could be a second (overlapping) not rotated div doing this.

Answer 1

Without knowing precisely what this is for it's difficult to divine what you want, but making a couple of assumptions then no it isn't possible.

Having re-read any amount of rotation would require you to scale up the rotated div to fill the full width. The precise amount of scaling required would depend on the height of the div; a calculation that isn't possible with CSS.

Answer 2

I like your diagram! I reproduced it in this jsfiddle *, but I'm not sure whether that's exactly what you want. I just made the inner div wider than the containing div, and then set overflow: hidden; . This is a pretty messy solution, it won't work if you have important stuff in the lower part of the div. You might be better off using some javascript to jigger the scale, etc...

You can inspect the css:

.container {
    background-color: blue;
    height: 500px;
    width: 300px;
    overflow:hidden;
}

.inner {
  background-color: #FF0000;
  height: 100%;
  position: relative;
  top: 100px;
  transform: rotate(7deg);
  transform-origin: 0 0 0;
  width: 150%;
  padding: 10px;
}

I'm just learning about transforms myself, so I hope this is at least a little helpful.

* and here it is with a scroll bar on the right side only : fiddle . This is achieved by having one outer div with overflow:hidden and another with overflow:auto and appropriate width/height.