是否可以在CSS3中的元素之間創建線條？

我在創建的應用程序中使用jQuery Draggable，我想知道是否有可能以某種方式在網站上的對話框和元素之間創建一條線？拖動它時，我希望它跟隨可拖動框。是否可以在CSS3中的元素之間創建線條？

我正在尋找CSS/HTML方式而不是jQuery/JS方式。如果使用純CSS3沒有辦法來創建它/ HTML5然後我會用JS的方法開始 - 只是想知道:)

enter image description here

2012-09-23 Atadj

如果沒有JavaScript，則不能使用畫布。 –

@dystroy太糟糕了，但謝謝澄清！然後我認爲這是我瞭解HTML5畫布並使用JS/HTML5畫布解決方案創建它的唯一方法。 – Atadj

確實有可能。鼠標事件實時爲您提供遊標信息，並且畫布可讓您繪製相應的線條。我建議在畫布教程中投入一些時間。 –

基本上是：沒有，沒有辦法只使用CSS來實現這一點。但是，如果這被看作是一個CSS謎題（我建議您不要在任何真實世界的應用程序中使用以下解決方案），您可能可以實現類似的功能。同樣，這將徹底濫用HTML和CSS。

你基本上創造了很多divs，每個代表一個'像素'。你在:hover上更改divs'background-color，並在:hover狀態不再使用（另一個濫用）transition技巧（僞無限延遲）後保持background-color。

下面是一個演示：little link。嘗試將鼠標懸停在頂部，以查看移動鼠標時繪製的「麪包屑」。

我再次誇大這是完全濫用，不應該在任何實際應用中使用。

這可以擴展到使用CSS創建一個微小的繪畫程序。我做了一個小dabblet來說明：another little link（嘗試通過點擊和移動鼠標繪製！）

底線：使用JavaScript - 這是在這種情況下，唯一的救命稻草（你無法控制沒有JavaScript的canvas）。

2012-09-23 13:46:35 Chris

瘋狂黑客+1 :-) – Bergi

您甚至可以使用canvas或svg。 – Jigar7521

回答