CODEWITHSUNDEEP
csstimeline
LocustHorde
LocustHorde

Reputation: 6399

Placing a circular element on margin like in timelines

I am trying to code a design that looks like this:

mockup of the image

So far, I have managed to get the center margin, the speech bubbles and the triangles on the bubbles. However, I am not sure how to go about the corresponding circle elements that needs to be placed on the margin.

I have a simple mockup here: http://cssdesk.com/5bdmv

I could create elements and absolutely position them for each bubble, but that's not the right way of doing it.. and I cannot have multiple psuedo elements either.

How would I do this without having to absolutely positioning them, please?

Upvotes: 0

Views: 82

Answers (1)

Guy
Guy

Reputation: 11315

One way would be to add a span into the event div and then style that accordinly. I have edited your markup here: http://cssdesk.com/8FNgu

Upvotes: 1

Related Questions