Javascript 旋转div，但防止窗口边框溢出

我想把一个div旋转7度。但是这个div应该填充整个空间，从左到右，从下到下。像这样：

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

_____________________
||如果不确切地知道这是什么，很难预测你想要什么，但是做一些假设，那么不，这是不可能的

重新读取任何旋转量后，需要放大旋转的div以填充整个宽度。所需的精确缩放量取决于div的高度；CSS不可能实现的计算。
我喜欢你的图表！我在这个*中复制了它，但我不确定这是否正是你想要的。我只是使内部div比包含的div宽，然后设置
overflow:hidden。这是一个相当混乱的解决方案，如果你在div的下半部分有重要的内容，它将不起作用。你最好使用一些javascript来调整比例，等等

您可以检查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;
}

我自己也在学习转换，所以我希望这至少有点帮助

*这里只有右侧的滚动条：。这是通过一个带有
溢出：隐藏的外部div和另一个带有
溢出：自动和适当的宽度/高度的外部div来实现的。
到目前为止，您尝试了什么？还有，你有没有一个例子说明你现在的处境？现在有点摸不着头脑..创建它会有助于了解div中是否有内容，或者它是否只是为了看起来时髦和斜对角。你看，这会使事情复杂化很多。