仅使用HTML和/或CSS的曲线

我需要在HTML中添加连接图节点的曲线。我只想使用HTML和/或CSS创建它们。即使不是所有的浏览器都支持我所需要的功能，我也可以使用CSS3（特别是不太关心IE8及以下版本）。以下是我可以使用的解决方案，并提出反对理由：

• 画布或svg-我不喜欢它，因为我必须处理浏览器之间的差异，而且当我有成百上千的这些对象漂浮在我漂亮的节点之间时，我不能确定它们的性能
• 图像-我需要大量的图像来处理所有可能的曲线，而图像在放大和缩小时根本不能很好地缩放
• 带有css边框半径的div和另一个div，它覆盖了我们不想要的部分线-不担心IE8和以下版本不支持这一点，但这是一个丑陋的黑客行为，我不能让结果曲线覆盖任何东西，比如背景或其他线重叠。我可以吗

---

我错过了什么选择？有没有可能有一个边界半径只有一个角可见的div（并且可以在除IE8及以下浏览器之外的所有浏览器上使用）？

您可能应该使用

画布，因为画布是为绘图设计的。使用
canvas
的性能应该优于使用DOM元素，尤其是使用GPU加速进行绘图的较新版本

无论如何，您始终可以将
边框半径
与
边框宽度
或
边框颜色
结合使用，通过仅显示元素边框的一侧而隐藏所有其他边来创建曲线：

#curves.width div {
    border-color: transparent transparent transparent #999;
}

#curves.color div {
    border-width: 0 0 0 1px;
}

将其与不同的
边界半径组合相结合，就得到了一些曲线。我在这里制作了一个非常简单的演示：

您甚至可以将其与CSS3
transform
rotation和transformation结合使用，以获得更大的灵活性。然而，它仍然比使用
画布
更具限制性，也更难控制
 我认为，对于数百个甚至数千个对象，SVG的性能不会太差，当然也不会比任何其他方法差。主要的性能问题是在IE中，您必须使用某种方法退回到VML或Flash，并且您说您不太关心IE8的支持

你可以画出所有的线，并且只有一个对象需要处理，只要你不打算一直添加和删除线。一条路径中的所有线都必须是相同的颜色，因此您需要的路径数量与线的颜色一样多。
您能简单地展示一下您想要的线和节点的外观吗？@我建议您使用一个抽象库，如；这将跨多个浏览器和技术工作，并使您免受浏览器差异的影响。@Justin节点是简单的div，这些线只是简单的曲线，就像在任何图表中一样tool@Phrogz我想要一个尽可能轻量级的解决方案，并使用标准的html/css，因为我的javascript应用程序中的所有其他内容都是这样的。正如我在另一个问题中所讨论的那样，拉斐尔还有其他问题需要我去解决。易江的解决方案非常完美。精彩的答案和示例/工具！想知道在打印过程中需要添加什么来保持曲线？元素在打印预览中变成正方形。有什么想法吗？谢谢。那把小提琴上有一个403被禁止使用。@HermanningJaldson谢谢你的提醒-应该再公开一次我仍然得到一个403被禁止使用的小提琴