- This topic is empty.
July 26, 2015 at 10:36 am #205533
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 :PJuly 26, 2015 at 11:24 am #205538Paulie_DMember
Looks like fairly standard timeline type thing.
I’d use a list myself.July 26, 2015 at 5:27 pm #205608Chris CoyierKeymaster
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
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
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 :)
- The forum ‘CSS’ is closed to new topics and replies.