仅使用HTML和/或CSS的曲线

Question

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

• canvas或svg- 不喜欢它，因为当我有好几千个（也许成千上万个）这些对象在我的漂亮节点之间浮动时，我不得不处理浏览器差异并且不确定性能
• 图像 -我需要大量图像来处理所有可能的曲线，并且放大和缩小图像时根本无法很好地缩放
• 带有CSS边框半径的div和另一个div覆盖了我们不需要的部分线 -不担心IE8，并且下面不支持此功能，但这是一个丑陋的方法，我无法在上面得到弯曲的线背景或其他线条重叠的任何东西。我可以吗？

我缺少什么选择？是否可以有一个带有仅在1个角处可见的边框半径的div（并且可以在除IE8及以下版本的所有浏览器上使用）？

Answer 1

您可能应该使用canvas，因为canvas是为绘画而设计的。使用的性能canvas应比使用DOM元素更好，尤其是使用GPU加速进行绘制的较新版本。

无论如何，您始终可以通过仅显示元素边框的一侧，同时隐藏所有其他元素，来border-radius结合使用border-width或border- color来创建曲线：

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

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

结合使用的不同组合border-radius，您将获得一些曲线。

您甚至可以将其与CSS3transform旋转和转换结合使用，以获得更大的灵活性。但是，与使用相比，它仍然更具限制性canvas，并且也更加难以控制。