Grow your CSS skills. Land your dream job.

Requesting CSS3 Background Solution

  • Lgn
    # March 18, 2013 at 12:25 pm

    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 :)

    # March 18, 2013 at 12:33 pm

    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
    # March 18, 2013 at 12:42 pm

    @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.

    # March 18, 2013 at 12:53 pm

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

    # March 18, 2013 at 1:04 pm

    @Merri Hmmm…nice.

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

    Lgn
    # March 18, 2013 at 1:14 pm

    @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!

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".