没有Webkit透视图创建透视图

Question

我已尝试使用谷歌搜索，但无法在任何地方找到它。

有没有办法将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 }

如果你愿意，甚至可以为第二个解决方案使用伪元素（：before，：after）。

Answer 2

我认为你正在寻找CSS3 transforms。你可以倾斜并扩展到你心中的内容。