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
  • #46052
    Tim Wagner


    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.


    Hi Timsta,

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

    Hope it helps.


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


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

    Tim Wagner

    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.