仅使用HTML和/或CSS的曲线 [英] Curved lines using only HTML and/or CSS

问题描述

我需要在HTML中添加连接图表节点的曲线。我想使用 仅HTML和/或CSS 创建它们。我确定与CSS3即使不是所有的浏览器都支持我需要的功能（特别是不在乎这么多关于IE8和以下）。这里是我可以使用的原因对他们的解决方案：

I need to add curved lines connecting nodes of a diagram in HTML. I want to create them using only HTML and/or CSS. I'm ok with CSS3 even if not all browsers support the feature I need (particularly don't care so much about IE8 and below). Here are solutions I could use with reasons against them:

• canvas或svg - 不喜欢，当我有好几百个这样的对象漂浮在我的好的节点之间时，我必须处理浏览器的差异并且不能确定性能。


• image 将需要一个可笑的数量的图像来处理所有可能的曲线和图像放大和缩小时根本不会缩放


• div带有css边框 - 半径和另一个div覆盖我们不想要的部分线 - 不担心IE8和下面不支持这个，但这是一个丑陋的黑客，我不能得到的曲线在任何东西背景或其他线重叠。我可以吗？

• canvas or svg - don't like it because I have to then deal with browser differences and not sure of performance when I have hundreds, maybe thousands, of these objects floating between my nice nodes
• image - I would need a ridiculous number of images to deal with all the possible curved lines and an image doesn't scale nicely at all when zooming in and out
• div with a css border-radius and another div that covers the portion of the lines we don't want - not worried about IE8 and below not supporting this, but this is an ugly hack where I can't have the resulting curved lines over anything like a background or other lines overlapping. Can I?

我缺少哪些选项？是否可能有一个div只有一个角可见的边框半径（并且除IE8和以下的所有浏览器可用）？

What options am I missing? Is it possible to have a div with a border-radius that is visible for only 1 corner (and work on all browsers except IE8 and below)?

推荐答案

你应该可以使用 canvas ，因为canvas是为绘图设计的。使用 canvas 的性能应该优于使用DOM元素，特别是对于使用GPU加速绘制的较新版本。

You should probably be using canvas, since canvas is designed for drawing stuff. The performance of using canvas should be better than using DOM elements, especially with newer versions that uses GPU acceleration for drawing.

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

Anyway, you can always use border-radius combined with border-width or border-color to create curves by showing only one side of the border of element, while hiding all others:

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

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

结合 border-radius ，你自己有一些曲线。我在这里提供了一个非常简单的演示： http://www.jsfiddle.net/yijiang / nDxYJ /

Combining this with different combinations of border-radius, and you've got yourself some curves. I've whipped up a very simple demo for this here: http://www.jsfiddle.net/yijiang/nDxYJ/

您甚至可以结合CSS3 transform 旋转和转换，但是，它仍然比使用 canvas 更加限制，并且更难以控制。

You can even combine it with CSS3 transform rotation and transformation for more flexibility. It is, however, still more restrictive than using canvas, and more difficult to control too.

这篇关于仅使用HTML和/或CSS的曲线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！