Requesting CSS3 Background Solution

[Lgn]

Hello, for the 1st time.

Decided to join up and see if there’s somebody with a solution to my problem here. So i got a nice looking design with backgrounds like arranged like in the following link: http://s21.postimage.org/3s4hn48if/example.png

I’ve tried a lot of ideas with making this happen just from CSS3 and crossbrowser ie9+/ch/saf/firefox bu all my iterations were not semantically correct and i hated the way they looked in code.

So each content box is supposed to have a dynamic height that scales with the content. Note that there are 2 columns on every content box. Both columns are arranged in a slant … like shown in the following picture: http://s18.postimage.org/detkrz1l5/example2.png

Help please! :) I’m guessing it’s an interesting problem :)

[Paulie_D]

Are the angles always going to be the same?

Will it just be 3 content boxes (with 2 columns)?

If the right column is taller than the left is the content box supposed to be like the bottom one in your image OR is that the only one that will be that shape?

Not **entirely** sure this is possible.

[Lgn]

@Paulie_D

Angles are going to be the same.

For example purposes i only used 3 content boxes … but the number can vary from 2 to 5.

Columns will always be 2 / content box … but these columns will be divs / widgets etc. Not to be confused with “columns:100px 3;”

The content box will wrap it’self around the highest column.

[Merri]

This ought to get you started: http://codepen.io/Merri/pen/zeKqk

[Paulie_D]

@Merri Hmmm…nice.

Not sure I’d go with a [ul] though but I suppose it could be adapted.

[Lgn]

@Merri hats off to you sir gonna adapt this. my version was crude and i didn’t like it but your is elegant … lot’s of love to you sir!

[Author]

Posts