在沒有Webkit透視的情況下創建透視

Question

我試過使用Google搜索，但無法找到任何地方。

有沒有一種方法可以將一個div從左邊的375px高度縮放到右邊的275px高度？

這樣的：

a trapezoid shape http://www.disennocreative.com/img/perspect_box_bg.png

Answer 1

如果<div>是不會包含任何東西，如果它只是容貌，那麼你可以只風格的邊框看起來像：

#yourDiv { 
    height:375px; /* height of the left side */ 
    width:0; 
    border-right:none; 
    border-left:50px solid gray; /* width of the "div" */ 

    border-top:50px solid transparent; 
    border-bottom:50px solid transparent; /* 375 - 50 - 50 = 275 */ 
} 

但是，如果你希望能夠把東西在<div>裏面，你可以做類似的東西，內容之前和之後，利用額外的，空的元素：

<div class="skewedBefore"></div> 
<div>blah blah blah</div> 
<div class="skewedAfter"></div> 

.skewedBefore, .skewedAfter { 
    height:0; width:0; 
    border-left:100px solid gray; /* width of the content div */ 
} 
.skewedBefore { border-top:50px solid transparent } 
.skewedAfter { border-bottom:50px solid transparent } 

你甚至可以使用僞元素（：前：後）爲第二個解決方案，如果你想至。

Answer 2

我認爲你正在尋找CSS3 transforms。你可以傾斜和縮放到你的內心。