Question

我想用7deg旋转一个div。这个div虽然应该在左，右和底部填充整个空间。像这样：

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

您应该可以向下滚动，而不可以向右滚动。

是否有html / css解决方案？或者我可能需要jquery或其他东西？

编辑：旋转的div实际上不需要将所有空间填充到底部。可能有第二个（重叠）未旋转的div这样做。

Answer 1

如果不确切知道这是什么意思，很难将你想要的东西分开，但做出几个假设，那就不可能了。

重新读取任何旋转量后，您需要放大旋转的div以填充整个宽度。所需的精确缩放量取决于div的高度; CSS无法实现的计算。

Answer 2

我喜欢你的图表！我在这个jsfiddle *中复制了它，但我不确定这是否正是你想要的。我只是使内部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;
}

我只是自己学习变形，所以我希望这至少有点帮助。

*此处右侧有一个滚动条仅：fiddle。这是通过使一个外部div具有overflow:hidden而另一个具有overflow:auto和适当的宽度/高度来实现的。

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

2 个答案: