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

Home Forums CSS Two column layout with skew

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #194547

    Hi all

    I have a jsfiddle here –

    I need to create a simple layout like this –
    this is just an image so will just scale.

    Is there a way to create this with css so the columns are slanted but the content straight or do I just have to create a big background image and then center it.

    In the jsfiddle I’m using bootstrap. I have a background image so the colors are full width. I then have columns that I skew and content inside that is skewed the oppsite direction to straighten it.

    This seems to work but I have to set a height which won’t work as the height will change.

    Is there an easier way of doing this.


    Checkout this demo, if this is what you are looking for.



    It depends on the effect you are trying to achieve.

    Do you want the text to follow the ‘skew’…if so then that seems to be the way to go..but it will be a pain having to skew everything back the other way.

    If all you are looking for is two columns with a skewed ‘dead’ (content -free) space between them, then you have other options.

    Something like…

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.