我需要添加连接HTML中图表节点的曲线。我只想使用 HTML和/或CSS 创建它们。即使不是所有的浏览器都支持我需要的功能,我对CSS3还是可以的(特别是对IE8及以下版本不太在意)。这是我可以针对其使用的解决方案:
我缺少什么选择?是否可以有一个带有仅在1个角处可见的边框半径的div(并且可以在除IE8及以下版本的所有浏览器上使用)?
您可能应该使用canvas,因为canvas是为绘画而设计的。使用的性能canvas应比使用DOM元素更好,尤其是使用GPU加速进行绘制的较新版本。
canvas
无论如何,您始终可以通过仅显示元素边框的一侧,同时隐藏所有其他元素,来border-radius结合使用border-width或border- color来创建曲线:
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,并且也更加难以控制。
transform