仅使用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 - 不喜欢，
- 图片 - 我需要处理浏览器的差异，并且在我的漂亮节点之间有数百，将需要一个可笑的数量的图像来处理所有可能的曲线，并且图像放大和缩小时根本不会很好地缩放
- 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屋！
