CODEWITHSUNDEEP
csstransform
William
William

Reputation: 1527

Creating Perspective without Webkit Perspective

I've tried googling this but can't find it anywhere.

Is there a way to scale a div from say 375px of height on the left, to 275px of height on the right?

like this:

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

Upvotes: 1

Views: 332

Answers (2)

sdleihssirhc
sdleihssirhc

Reputation: 42496

If the <div> isn't going to contain anything, if it's just for looks, then you can just style its border to look like that:

#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 */
}

But if you want to be able to put stuff inside the <div>, you could do something similar, using an extra, empty element before and after the content:

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

You could even use pseudo-elements (:before, :after) for that second solution if you wanted to.

Upvotes: 2

Andrew Kozak
Andrew Kozak

Reputation: 1660

I think you're looking for CSS3 transforms. you can skew and scale to your heart's content.

Upvotes: 1

Related Questions