27

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

royhowie
  • 10,605
  • 14
  • 45
  • 66
Variax
  • 1,037
  • 2
  • 10
  • 14
  • All of this elements can be created and positioned in pure HTML/CSS by using tags, pseudoelements (like `:before`), css3 transformations and absolute positioning, but keep in mind that it won't be much of a cross browser solution and it'll definitely take a lot of work. :) – nd_macias Mar 22 '13 at 10:02
  • 3
    did you look at this http://astuteo.com/slickmap/ is it the same deal? i didn't really go through – btevfik Mar 22 '13 at 10:04
  • @nd_macias Your solution sounds solid. However, I don't think I have neither the time nor the CSS skills to do it that way. I'll have to keep looking. Thanks though. – Variax Mar 22 '13 at 10:11
  • @btevfik That link only works for unordered lists, which are way too simple for this chart. – Variax Mar 22 '13 at 10:16
  • i don't think you are going to find a pure css solution to this. it seems way complicated for css to handle. – btevfik Mar 22 '13 at 10:18
  • You can create a diagram in HTML5 or SVG and still manipulate it with Javscript. – Ari Dec 24 '13 at 03:34
  • This is probably impossible in pure HTML and CSS since an element can have only one parent in HTML. – datasn.io Mar 28 '16 at 03:46
  • You might benefit by reviewing flowchart-related pens on codepen. http://codepen.io/search/pens/?q=flowchart&limit=all&order=popularity&depth=everything&show_forks=false – mg1075 Apr 07 '17 at 18:15

2 Answers2

18

You might want to take a look at this

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

Vikash Pathak
  • 2,897
  • 1
  • 14
  • 28
Dineshkumar
  • 353
  • 1
  • 8
5

Another to look for is SpaceTree example by "Nicolas Garcia Belmonte" but not a pure CSS solution. It is compatible with IE and most of browsers. Definitely worth a try.

Sanjay Zalke
  • 1,205
  • 1
  • 16
  • 24
  • 2
    Ok, can I ask to the awesome person who says this was not useful? can (s)he please told us why (s)he thinks this was not useful? I have delivered a small project using this and was so much fun to work with this one. I agree it is not super flexible but can be changed to suit your need. – Sanjay Zalke Feb 13 '15 at 08:54