用css旋轉的可擴展div

我想用旋轉10度左邊的矩形div創建頁面佈局，用瀏覽器的大小擴展，並且不在左上方顯示邊緣，和底部。意思是，頁面應該顯示爲在斜面中間分裂。用css旋轉的可擴展div

我的代碼到目前爲止正確創建div，但是當我展開頁面時，您將開始看到邊緣。

HTML

<div id="wrapper"> 
    <div id="right"></div> 
</div>

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; 
}

來源

2013-01-09 MG1

可能要創建[的jsfiddle（HTTP演示：//的jsfiddle。淨）或類似的東西，所以我們可以直觀地看到問題。 –

的問題是tranform財產需要渲染的前綴。你必須添加這些行：

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

take a look at this

或使用許多無前綴的腳本一個像this one

來源

2013-01-09 20:08:50

謝謝 - 但我的問題是如何使這項工作，以便如果用戶擴大他的屏幕，你將無法看到頂部，左側或底部的任何空白空間？ – MG1

你已經做到了這一點，如果你調整jsFiddles結果視圖的大小，你可以看到黑色div改變了它的大小 –

是的 - 但是當我擴大瀏覽器大小時，我看到頂部，左側和底部的空白區域。我需要這樣做，就好像屏幕被一條對角線分開，左側全黑和右側白色。 – MG1

用css旋轉的可擴展div

回答

相關問題