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
  • #205533

    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:

    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:

    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


    Looks like fairly standard timeline type thing.

    I’d use a list myself.

    Chris Coyier

    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!


    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.


    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.

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

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