2013-03-22 92 views
24

我需要爲網站製作一個非常複雜的圖表,其中層次結構會有點混亂:箭頭會上下移動,有時候元素會指向其他幾個,有時會有幾個元素指向同一個元素。我發現this method,但它不允許多個父元素,因此在這種情況下不會執行此操作。如何僅使用HTML和CSS製作流程圖/圖表

它必須在HTML/CSS中完成,因爲我的意圖是添加一些Javascript來改變塊的內容。

這是複雜程度的一個例子,我需要實現: chart

+0

所有這些元素都可以通過使用標籤,僞元素(如':before'),css3變換和絕對定位來創建和定位在純HTML/CSS中,但請記住它不會是很大的交叉瀏覽器解決方案,它肯定會花費很多工作。 :) – 2013-03-22 10:02:18

+3

你看過這個http://astuteo.com/slickmap/是否是同樣的交易?我並沒有真正通過 – btevfik 2013-03-22 10:04:17

+0

@nd_macias您的解決方案聽起來很紮實。但是,我認爲我沒有時間和CSS技能這樣做。我必須繼續尋找。不過謝謝。 – Variax 2013-03-22 10:11:12

回答

2

另一個是尋找SpaceTree example通過「尼古拉斯加西亞貝爾蒙特」,但不是一個純粹的CSS解決方案。它與IE和大多數瀏覽器兼容。絕對值得一試。

+0

好的,我可以問問那些說這沒用的真棒人嗎?他可以告訴我們他爲什麼認爲這沒有用?我已經使用這個項目交付了一個小項目,並且與這個項目一起工作非常有趣。我同意它不是超靈活的,但可以改變以適應您的需要。 – 2015-02-13 08:54:44