小编典典

仅使用HTML和/或CSS的曲线

css

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

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

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


阅读 1143

收藏
2020-05-16

共1个答案

小编典典

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

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

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

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

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

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

2020-05-16