Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Skewed backgrounds

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #46052
    Tim Wagner
    Participant

    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.

    #141342
    jev
    Participant

    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.

    #141344
    Kuzyo
    Participant

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

    #141368
    SilverSerpent
    Participant

    Here’s mine using a variation of the CSS Triangle technique: http://cdpn.io/ujpKC

    #141452
    Tim Wagner
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.