• # 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 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 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.