CODEWITHSUNDEEP
htmlcssshapes
Deedub
Deedub

Reputation: 349

How to Skew divs with css

I have div and am wondering how I can angle/skew the bottom and right side slightly.

I can create triangles, and skew all sides, just not sure how to skew TWO sides.

Is this possible? Thanks.

Upvotes: 0

Views: 1270

Answers (2)

Joshua Dwire
Joshua Dwire

Reputation: 5443

In newer browsers, you can use CSS transforms.

This code will skew a div:

-webkit-transform: matrix(1, 0, 0.6, 1, 250, 0);
-o-transform: matrix(1, 0, 0.6, 1, 250, 0);
transform: matrix(1, 0, 0.6, 1, 250, 0);

The result will look something like this: enter image description here

JSFiddle

The Mozilla Developer Network has an article that tells more about the different transformations you can apply. It also has several examples and has details about browser compatibility.

Upvotes: 0

Cody Bonney
Cody Bonney

Reputation: 1658

You might be able to do it using :before and :after CSS selectors. I just whipped up a rough example.

JSFiddle

HTML:

<div class="slanted"></div>

CSS:

.slanted {
    position: relative;
    height: 200px;
    width: 380px;
    min-width: 380px;
    max-width: 380px;
    background: #000;
}

.slanted:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    border-right: 180px solid #000;
    border-top: 100px solid #000;
    border-bottom: 100px solid #fff; /* page background color */
}

.slanted:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-left: 200px solid #000;
    border-bottom: 200px solid #fff; /* page background color */
}

Upvotes: 3

Related Questions