是否可以在CSS3中的元素之间创建直线？

Question

我正在创建的应用程序中使用jQuery Draggable，我想知道是否有可能在网站上的对话框和元素之间创建一条线？当你拖动它的时候，我想让它跟随可拖拽的框。

我正在寻找CSS/HTML的方式，而不是jQuery/JS的方式。如果没有办法使用纯CSS3/HTML5创建它，那么我将从JS方法开始-只是想知道:)

​

​

Answer 1

基本上: CSS不，没有办法只使用实现这一点。

但是，如果观察到这是一个CSS谜语(我建议您不要在任何实际应用程序中使用以下解决方案)，您也许能够实现类似的结果。同样，这将完全滥用HTML和CSS。

你基本上创建了很多像素，每个divs代表一个‘像素’。您在:hover上更改divs的background-color，并在:hover状态消失后使用(另一个滥用的) transition技巧(伪无限延迟)维护background-color。

这里有一个演示：little link。试着将鼠标悬停在顶部可以看到当你移动鼠标时绘制的“面包屑”。

我再次强调，这完全是滥用，不应该在任何实际应用程序中使用。

这可以扩展为使用CSS创建一个小的绘画程序。我做了一个小插图来说明：another little link (试着通过点击并移动鼠标来绘图！)

底线：使用JavaScript --在这种情况下这是唯一的方法(没有JavaScript就无法控制canvas )。