是否可以在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

回答