Вертикальная линия в центре блока, как?

Question

[Сергей Миллер]

Ребята, подскажите, пожалуйста, как такое вообще организовать, на чем? JS, Canvas? Как лучше и проще? Первый раз с этим сталкиваюсь и хотелось бы услышать ответ знатоков.

А если кто-то может дать ссылку на "codepen" то было бы очень познавательно. Спасибо.

Answer 1

[Дмитрий Локшин]

Не поленился и реализовал прям Ваш пример https://jsfiddle.net/aefq89h9/ хотя сначала просто хотел на словах расписать))
Либо вот https://jsfiddle.net/ckLz0x3c/ еще один вариант, т.к. при адаптивности лучше бы знать точно расстояние от линии.
В общем можно еще много вариантов придумать, но, надеюсь, смысл Вам понятен.

Comments

[Иван]

ну это рили кайф)могёшь)

[Сергей Миллер]

Спасибо большое, приятно когда отвечают четко по делу, беру на вооружение Ваш код.

[Дмитрий Локшин]

Сергей Миллер: Не за что, рад что смог помочь!

Answer 2

[automatik]

https://codyhouse.co/gem/vertical-timeline/

Comments

[Златослав Десятников]

Сергей Миллер тут тоже решение :)

Answer 3

[Иван]

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

https://codepen.io/Acconut/pen/ftFaw
и вот индусавидео https://www.youtube.com/watch?v=B1WYeCf186Q

Comments

[Андрей Прозоров]

Нет, логично и уголок и круг сделать псевдоэлементом одной картинкой. Так будет гораздо проще расположить их друг на против друга

[Иван]

Андрей Прозоров: мне не совсем понятно :)

просто следуя коду который в codeopen ,то линия это блок, ему before after задать кругами, а вот трегуольники это будут псевдоэлементы блоков с текстом .

поправьте новичка,если что:З

Answer 4

[romy4]

что-то вроде степпера или как выше показали https://material.io/guidelines/components/steppers...