Как соединить блоки линиями?

Question

[veroni1337]

Добрый день, подскажите как можно соединить эти блоки линиями, что бы было адаптивно


Сам блок я сверстал так

<div class="stages-wrap">
                <div class="stages-box stages-box-1" id="start">
                    <div class="stages-icon">
                        <img src="image/service-1.svg" alt="icon">
                    </div>

                    <p>
                        1. Встреча 
                    </p>
                </div>
                

                <div class="stages-box stages-box-2" id="end">
                    <div class="stages-icon">
                        <img src="image/service-2.svg" alt="icon">
                    </div>

                    <p>
                        2. Заключение договора
                    </p>
                </div>

                <div class="stages-box">
                    <div class="stages-icon">
                        <img src="image/service-3.svg" alt="icon">
                    </div>

                    <p>
                        3. Передача документов  
                    </p>
                </div>

                <div class="stages-box">
                    <div class="stages-icon">
                        <img src="image/service-4.svg" alt="icon">
                    </div>

                    <p>
                        4, Старт 
                    </p>
                </div>

                <div class="stages-box">
                    <div class="stages-icon">
                        <img src="image/service-5.svg" alt="icon">
                    </div>

                    <p>
                        5. Отчет 
                    </p>
                </div>
            </div>

.stages-wrap {
    min-height: 540px;
    display: flex;
    justify-content: space-between;
}

.stages-box:nth-child(2n) {
    align-self: flex-end;
}

Может есть какие то плагины jquery?

Comments

[Андрей Федоров]

Градиентами на background делайте, это не сложно, если разобраться. Не забудьте, что множественный background можно указать через запятую.

[veroni1337]

Андрей Федоров, попробую. Спасибо

[Андрей Федоров]

veroni1337,

[veroni1337]

Андрей Федоров, сделаю

[Иван Гордиенко]

Я бы попробовал через псведоэлементы. Их можно спозиционировать относительно родителя, поэтому с адаптивностью проблем не будет.

[veroni1337]

Иван Гордиенко, https://codepen.io/arsenty/pen/mYxXoQ нашел на хабре такой вариант. Вы про это?

[Иван Гордиенко]

veroni1337, да.

[veroni1337]

Иван Гордиенко, Мне кажется что я что то не так делаю. Оцените какой вариант лучше.
https://codepen.io/Veroni1337/pen/GRWMJYv
https://codepen.io/Veroni1337/pen/zYZEGMO
Сейчас немного кривовато, но это я поправлю. Хочу узнать насколько правильно то, что я делаю

[veroni1337]

Иван Гордиенко, если вставить как background, это будет костыль?

[Иван Гордиенко]

veroni1337, https://codepen.io/coresak/pen/wvJrMav я немного иначе интерпретировал флекс элементы, адаптивность будет идеальна, если добавить 1 медиа запрос на угол наклона линий (добавил).

[veroni1337]

Иван Гордиенко, спасибо, круто получилось

Answer 1

[veroni1337]

https://aktseptaudit.kz/ сделал через псевдоэлементы. Может это и костыль, но самый быстрый вариант(

Comments

[Иван Гордиенко]

https://codepen.io/coresak/pen/wvJrMav чек.