Стоп кран от дизайнера, красиво, но нужно адаптивно?

Question

[Axepec]

Люблю сложные задачки, но вот тут голову ломаю второй день. Люблю так, что бы все было четко )
Можно сделать на отмашь и как бы наверное мало кто заметит, но не мой это подход.
Есть дизайн:


интересует как сделать, так что бы даже при ресайзе страницы в ширину линия четко выходила из нижнего правого угла, затем входила в нижний правый угол блока, и прошибала его через верхний левый угол.... дальше куда они пойдет уже пофиг в целом то.

Понятно, что без js не обойтись, но я даже понять не могу как считать, и чем её лучше отрисовывать

Answer 1

[Ankhena]

С толщиной линий надо еще как-то получше развлечься https://jsfiddle.net/o3yuuuff/

Comments

[Ankhena]

Либо на JS считать пропорции и углы.
Пропорции блоков вот так можно задавать https://jsfiddle.net/Ankhena/cLhxv7eq/ если %% и vw|vh не подходят.
Либо SVGшку подсунуть.

[Axepec]

Ты вообще кто такой ))))) Я вообще не понял что происходит)) тут вся толпа решений накидывает, а ты в "две" строчки решение накидал ))))) Спасибо большое )))

Answer 2

[GavriKos]

Если пропорция центрального блока отличается от пропорции окна - то сделать это одной линией невозможно.

Comments

[Axepec]

Блин точно!!! Ок! А как отрисовывать линию, расчитывать её угол?

[GavriKos]

Да это тупо диагноаль. Правильный вопрос - как расчитать размер центрального блока. А это уже - соотношение сторон в прямоугольном треугольнике. Например.

[Axepec]

GavriKos: ок, логично. ладно буду пробовать

Answer 3

[Stepanya]

Нарисуйте 7 паралельных линий

Comments

[Alex Wells]

Пересекающихся попарно)))

Answer 4

[sergski]

Прикольная задачка, попробовал накидать решение, но где-то изъян.)
Попытка тут

Answer 5

[kmg4e]

Для начала: дизайнер должен нарисовать 2-3 вариант для разного размера экранов.
Можно обойтись без хитрого JS, если чисто математически рассчитать расположение.
К примеру, если квадрат центрирован - то и линии всегда будут выходить из углов.

Comments

[Axepec]

Да разные размеры экранов не выход, потому что у всех вообще разные мониторы с разным расширением, и верстать стараюсь от 320px и до .....

Если привязать линию к центру прямоугольника и поставить даже фиксированную ширину, и найти угол линии, что бы выходила из углов. то она далеко не всегда будет попадать в нижний правый угол секции.

[Negwereth]

Так это, у блока должны быть те же пропорции, что и у вьюпорта. Все.

[kmg4e]

Axepec: если у блока не могут быть те же пропорции что и вьюпорта (это нужно с дизайнером согласовать), то придется рисовать через JS, да.
Например, на Canvas.

[Axepec]

Negwereth: Хорошо) верно ) Ок! А как отрисовывать линию, расчитывать её угол?

[kmg4e]

Axepec: я бы с дизайнером пообщался для начала.
может по его идеи линии должны входить одна в одну, являться продолжением друг друга.
и он забыл что могут быть разные вьюпорты