The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Skewed backgrounds

  • # July 2, 2013 at 3:27 pm


    I was thinking about possible shapes for a new site and I thought about one with a skewed background at the top. I think it
    works best when I show you a [picture](,unbenanntGFMSY.png “skewed background”). I did this with an image and a lot of unsemantic HTML and CSS. So, what is the best way to do that? Does it also work without an image? And I chose an unsemantic div to integrate the image, I think this is not required, though. Maybe the pseudo element ::before helps?

    I hope you know what I mean.

    Thanks for any help.

    # July 2, 2013 at 4:12 pm

    Hi Timsta,

    check out below pen. Just like you assumed, pseudo element helps us achieve the skewed effect.

    Hope it helps.

    # July 2, 2013 at 4:27 pm

    Hi, I have tried to do it by gradient, but result not so good

    # July 2, 2013 at 5:41 pm

    This reply has been reported for inappropriate content.

    here is :) mine too with pseudo and responsive to width , using transform:rotate(xdeg);

    This technic let you add some box-shadow , if you wish.

    # July 2, 2013 at 8:46 pm

    Here’s mine using a variation of the CSS Triangle technique:

    # July 3, 2013 at 10:55 am

    Thanks to all of you. It all helped me a lot, but I think @gcyrillus‘ version is the least pixelated one, though. I will go with that.

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed