Grow your CSS skills. Land your dream job.

Skewed backgrounds

  • # July 2, 2013 at 3:27 pm

    Hi,

    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](http://www.upload-pictures.de/bild.php/34754,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.

    jev
    # 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.

    http://codepen.io/anon/pen/HfBca

    Hope it helps.

    # July 2, 2013 at 4:27 pm

    Hi, I have tried to do it by gradient, but result not so good http://codepen.io/Kuzyo/pen/AjKHb

    # July 2, 2013 at 5:41 pm

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

    http://codepen.io/gcyrillus/pen/ALlks.

    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: http://cdpn.io/ujpKC

    # 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.

*May or may not contain any actual "CSS" or "Tricks".