Как сделать такой луч через весь макет?

Question

[skuvaWeb]

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

Answer 1

[Максим]

Просто нарисовать в векторе или в растре и поставить на фон , так можно наверное

Comments

[skuvaWeb]

Луч выше чем bg у промо секции, но ниже чем остальные элементы.
Если отдельно делать луч у промо секции, и у остального контента, то не получается подогнать их "стык" таким образом, чтобы при изменении экрана все не съезжало

[Максим]

skuvaWeb, о каком стыке речь ? делайте/рисуйте целый луч ...есть же такое понятие как мульти-фон

[Rustam Bainazarov]

Максим Ленский, он о стыке между первым и вторым блоками, где луч меняет цвет.

skuvaWeb, луч взят с сайта PHPStorm, но там поступили правильно: не стали делать того, что сложно сделать в реальности, поэтому там это просто картинка.

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

[Максим]

SmthTo, skuvaWeb, У меня нету ни какого желания что то доказывать - но я так налепил от фонаря и естественно просто для демонстрации : https://codepen.io/topicstarter/pen/REXYRo

[Rustam Bainazarov]

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

[Максим]

SmthTo, я так и сказал - что обычный фон либо в svg либо растровая графика ...