如何仅使用 HTML 和 CSS 制作流程图/图表

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

提问by Variax

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.

它必须在 HTML/CSS 中完成，因为我的目的是添加一些 Javascript 来动态更改块的内容。

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

这是我需要达到的复杂程度的一个例子：

回答by Dineshkumar

You might want to take a look at this

你可能想看看这个

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

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

回答by Sanjay Zalke

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

另一个要寻找的是“Nicolas Garcia Belmonte”的SpaceTree示例，但不是纯 CSS 解决方案。它与 IE 和大多数浏览器兼容。绝对值得一试。