Html 可扩展div'；s用css旋转

我正在尝试创建一个页面布局，左侧有一个矩形div，旋转10度，随着浏览器的大小而扩展，并且不在顶部、左侧和底部显示其边缘。意思是，页面应该出现在中间倾斜的位置。 到目前为止，我的代码正确地创建了div，但是当我展开页面时，您开始看到边缘

HTML

---

问题是

tranform

属性需要渲染前缀。您必须添加以下行：

-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);

---

或者使用许多无前缀脚本中的一个，如

，可能希望在上面或类似的地方创建演示，以便我们可以直观地看到问题。谢谢-但我的问题是，如何使这项工作正常进行，以便如果用户展开屏幕，您将无法看到顶部、左侧或底部的任何空白？您已经这样做了，如果调整JSFIDLLES结果视图的大小，您可以看到黑色div改变了它的SizeEyes，但是当我扩展浏览器大小时，我看到顶部、左侧和底部都有空白。我需要它看起来像是屏幕被一条斜线分开，左边全黑，右边全白。我认为最简单的方法是使用图像，但如果你找到一个解决方案，我想听听：）我以为我已经通过应用位置解决了这个问题：修复所有问题。但如果我想让设计在低分辨率和移动设备上看起来不错，这就行不通了。我甚至尝试使用jquery的一个等式来根据窗口的宽度和高度来更改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;
}

-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-o-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);