Как нарисовать косую линию в HTML?

Question

[ssneg]

Привет!

У меня есть поле (div), на котором расставлены узлы (много разных div). Между узлами нужно «протянуть ниточки», т.е. нарисовать косые линии. Или не косые, а Z-образные. Всё это на JQuery.

Вопрос: как это лучше всего сделать? Т.е. посоветуйте хорошую и лёгкую библиотеку.

Спасибо!

Answer 1

[temaHT]

Канвас — наше все.
www.html5dev.ru/canvas-api/2011/01/10/izuchaem-canvas-urok-2---risuem-linii-i-krivye.html

Answer 2

[Ano]

<style>
hr {
  -webkit-transform: rotate(120deg);
     -moz-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
       -o-transform: rotate(120deg);
}
</style>

<hr>

:)))

Comments

[Олег Торбасов]

…Но только IE9+, O10.5+, Fx3.5+, Webkit.

[Ano]

Ну это шутка. Raphaël. Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+, IE 6.0+.

Answer 3

[Ano]

Кривые же! Канвас — зло! SVG/VML! А значит, raphaeljs.

Comments

[homm]

Канвас — не зло.

[Павло Пономаренко]

Зло — такие глупые заявления.

[hf35]

Просто для каждой задачи свои цели. Использовать в этой канвас — это не зло. Это глупо даже если бы было кроссбраузерно.

[Ano]

Ох, ну не зло, конечно, неудобно просто для такой задачи.

Answer 4

[unspecified]

Библиотеку не подскажу, но думаю самый оптимальный вариант — canvas

Answer 5

[Avtandilko]

ru.wikipedia.org/wiki/%D0%90%D0%BB%D0%B3%D0%BE%D1%80%D0%B8%D1%82%D0%BC_%D0%91%D1%80%D0%B5%D0%B7%D0%B5%D0%BD%D1%85%D1%8D%D0%BC%D0%B0

Comments

[Avtandilko]

Алгоритм Брезенхэма в общем

Answer 6

[julie]

как в итоге нарисовали?

Comments

[ssneg]

Текущая версия на канвасе.

[julie]

последовала вашему примеру, спасибо :)

[ssneg]

Вот тут — много библиотек: habrahabr.ru/post/140856/

Answer 7

[hf35]

Теорема пифагора и абсолютно позиционированные ноды 1 на 1 пк спасут отца русской демократии)

Ну или рафаэля.

оба вариант кроссбраузерные.

Канвас в топку. Он для другого.