Создание перспективы без перспективы Webkit

Question

Я пытался найти это в Google, но нигде не могу его найти.

Есть ли способ масштабирования div, скажем, с высоты 375 пикселей слева до высоты справа 275 пикселей?

как это:

форма трапеции 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-преобразования .Вы можете искажать и масштабировать до глубины души.