Forums

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
    Posts
  • #194547
    ttmt_73
    Participant

    Hi all

    I have a jsfiddle here – http://jsfiddle.net/Lwzb653e/2/

    I need to create a simple layout like this – http://www.ttmt.org.uk/block.png
    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.

    #194578
    kwerty
    Participant

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

    Codepen

    #194579
    Paulie_D
    Moderator

    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…

    http://codepen.io/Paulie-D/pen/bNraKQ

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