在没有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。你可以倾斜和缩放到你的内心。