How to make a flowchart/diagram using only HTML and CSS

html css flowchart
Variax picture Variax · Mar 22, 2013 · Viewed 87.1k times · Source

I need to make a really complicated diagram for a website, in which the hierarchy will be a bit messy: arrows will go up and down, sometimes an element will point to several others, and sometimes there will be several elements pointing to the same one. I have found this method, but it doesn't allow more than one parent for an element and therefore won't do the trick in this case.

It has to be done in HTML/CSS, because my intention is to add some Javascript to change the content of the blocks dinamically.

This is an example of the level of complexity I need to achieve: chart

Answer

Dineshkumar picture Dineshkumar · Mar 22, 2013

You might want to take a look at this

http://thecodeplayer.com/walkthrough/css3-family-tree

Related questions

Creating a flowchart in HTML

I am a complete noob in CSS/HTML and have been trying to create a flowchart for a few hours now with little success.I'm trying to create something similar to this: http://jsfiddle.net/pointbypointuk/ETg7q/2/ However I …

Read More
How to horizontally center a <div>

How can I horizontally center a <div> within another <div> using CSS? <div id="outer"> <div id="inner">Foo foo</div> </div>

Read More
How do I vertically center text with CSS?

I have a <div> element which contains text and I want to align the contents of this <div> vertically center. Here is my <div> style: #box { height: 170px; width: 270px; background: #000; font-size: 48px; color: #…

Read More