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

Question

我需要为一个网站制作一个非常复杂的图表，其中层次结构会有些混乱：箭头会上下移动，有时一个元素会指向几个其他元素，有时会有几个元素指向同一个元素。我找到了这种方法，但它不允许一个元素有多个父级，因此在这种情况下行不通。

必须使用HTML/CSS完成，因为我的意图是添加一些Javascript以动态更改块的内容。

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

- Variax

---

所有这些元素都可以通过使用标签、伪元素（如 :before）、CSS3 变换和绝对定位在纯 HTML/CSS 中创建和定位，但请记住它不会是一个很好的跨浏览器解决方案，并且肯定需要大量的工作。 :) - nd_macias

你看过这个网站http://astuteo.com/slickmap/了吗？它跟我们的交易一样吗？我没仔细研究过。 - btevfik

@nd_macias 你的解决方案听起来很可靠。然而，我觉得我既没有时间也没有足够的CSS技能以那种方式来做。我还得继续寻找其他方法。不过还是谢谢你。 - Variax

我认为你不会找到一个纯CSS的解决方案。这似乎对于CSS来处理太过复杂了。 - btevfik

您可以使用HTML5或SVG创建图表，并仍然可以使用JavaScript进行操作。 - Ari

Answer 1

你可能想要看一下这个

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

- Dineshkumar

---

他已经说过那对他不起作用。 - btevfik

Answer 2

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

- Sanjay Zalke

---

好的，我可以问一下那位说这个不有用的厉害人士吗？他/她能否告诉我们为什么他/她认为这个不有用？我已经使用这个交付了一个小项目，使用它非常有趣。我同意它不是超级灵活的，但可以根据您的需求进行更改。 - Sanjay Zalke