Forums

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

Home › Forums › CSS › [Solved] Designer element challenge! Is this even doable?

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • July 26, 2015 at 10:36 am #205533
    FFRedshirt
    Participant

    Hey guys,

    I’ve been trying to figure this design element out and I am running out of ideas on how to implement. Heres the challenging problem:

    Skitch of the issue: http://i.imgur.com/uAxFYbY.png

    As you can see there are 3 divs with arrows but the arrows then have bullets before them. Then the final piece is a line that intersects said bullets.

    Given that this content will live on a responsive page I’m not sure what the best approach is to adding in the line on the left.

    Here is what I have thus far: http://codepen.io/anon/pen/jPexdr

    Forgot to mention that there is a very similar element that I’ll have to tackle later as well where its the same thing but the whole thing is rotated 90 degrees CCW.

    Thanks all! Hopefully your weekends have been as enjoyable as mine :P

    July 26, 2015 at 11:24 am #205538
    Paulie_D
    Member

    Looks like fairly standard timeline type thing.

    I’d use a list myself.

    July 26, 2015 at 5:27 pm #205608
    Chris Coyier
    Keymaster

    Looks like what you’ve already done has basically solved the problem. Pseudo elements are great for those little decorative arrows. The positioning of the arrows works for content of any length. Now it’s just a matter of tweaking the design to your liking!

    July 26, 2015 at 5:44 pm #205610
    FFRedshirt
    Participant

    Paulie_D: I totally hadn’t thought of that – I found some tutorials that showed me some ideas for the line that connects everything so thanks!

    Chris: Wow a celebrity has posted in my post! I think the part that has me completely tripped up is the fact that the line isnt so much a wrapper div’s :before that might be absolute positioned on the left side… but rather something that intersects the bullets and starts on the first bullet and ends on the last bullet. The unknown line’s height is really throwing me for a loop.

    I’m definitely a little closer now with some additional insight into timeline CSS layouts.

    August 23, 2015 at 9:51 pm #206977
    FFRedshirt
    Participant

    In case anyone was wondering… I think this turned out to be quite an interesting challenge.

    Here is a fork of my current standings. Like Chris mentioned, I used a lot of pseudo elements. Making use of :before :after :nth-child etc.

    http://codepen.io/ants/pen/MwNyVz

    The current solution flexes based on amount of content and thus far I haven’t been able to break it :)

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