Рисование диагональных линий в html5

Question

Учитывая div неизвестных размеров, как я могу нарисовать сплошную линию из одного угла в диагонально противоположный угол без использования JavaScript?

Я думал, что функция CSS3 calc() может помочь мне здесь, но это, кажется, вы не можете вытащить значения из высоты и ширины в другое свойство (например, преобразование или фоновое изображение) Я надеялся, что я мог бы сделать что-то вроде:

transform: rotate (calc(atan(height/width)) rad); 

(Расчет, вероятно, неправильно, но более важным является то, что синтаксис полностью придуман.)

Я нацеливание Firefox для этого проекта, но предпочел бы что-то, что будет работать в любом современном браузере.

Answer 1

Вы можете использовать SVG:

<svg style='width: 200px; height: 200px;'> 
    <line x1="0" y1="200" x2="200" y2="0" 
     style="stroke:rgb(255,0,0);stroke-width:2"/> 
</svg> 

С процентных координат, если потребности:

<svg style='width: 100%; height: 100%;'> 
    <line x1="0" y1="100%" x2="100%" y2="0" 
     style="stroke:rgb(255,0,0);stroke-width:2"/> 
</svg> 

http://jsfiddle.net/qXKfN/2/

^{(Должен работать в FF, Chrome, Safari, and IE >= 9)}

---

При различных размерах в различных браузерах SVG может быть вытолкнут из контейнера. Одним из решений является установка line-height: 0px;. Другим решением и, вероятно, предпочтительным решением является установка position: relative; на контейнер и position: absolute; на SVG.

http://jsfiddle.net/qXKfN/3/

Answer 2

Или вы можете использовать плагин: https://bitbucket.org/stopsopa/jquery.line Я не мог найти инструменты для рисования таких линий на вершине дивы в пути, не блокировать щелчки внизу, родилась тогда идея создания этого плагина ,

Плагин основан на преобразовании-вращении (css3) и одном элементе div.

Использование:

$.line(0, 0, 500, 1000); 

или

$('selector').line(0, 0, 500, 1000); 

вы также можете изменить цвет или ширину линии:

$('selector').line(0, 0, 500, 1000, { 
    css : { 
     borderTop: '5px solid red' 
    } 
}); 

и у вас есть также функция обратного вызова:

$('selector').line(0, 0, 500, 1000, { 
    css : { 
     borderTop: '5px solid red' 
    } 
}, function (linediv, opt) { 
    linediv.css({ 
     borderBottom : '1px solid black' 
    }); 
});