Two column layout with skew

[ttmt_73]

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.

[kwerty]

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

Codepen

[Paulie_D]

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

[Author]

Posts