微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

仅使用HTML和/或CSS的曲线

如何解决仅使用HTML和/或CSS的曲线

您可能应该使用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,并且也更加难以控制。

解决方法

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

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

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

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。