Anton Filippov

Чтобы нарисовать эту полоску нужно использовать псевдоэлементы и селекторы чётности.
::before - кружочки с бордерами
::after- линии
:nth-child(odd/even) чтобы задавать угол линий
:nth-child(1,2,3,4,5, ...)нагенерировать разные цвета, если они просто всегда идут в одном порядке. Если зависят от родителя - currentColor, если должен быть рандом или что-то другое - уже понадобится Javascript.

белый свг с пятиугольником

подключите буцтрап и фонтосом

Это не css, там wegl и three.js

Вы конечно можете поизвращаться с css-анимациями, прозрачностью и трансформами для достижения такого эффекта, но это обойдется дороже пользователям сайта, так как будет менее производительно

https://duckduckgo.com/?q=flex-basis+vs+width&ia=qa

первый результат в поисковике даёт наиподробнейшее объяснение как ответ на ваш вопрос

3 картинки, у средней z-index выше чем у боковых и позишном поднять его относительно их

можно паддингом, как посоветовал Артем Кирьянов, но если что-то изменится то придется опять лезть и менять, в вашем случае красивее и корректнее сделать так: https://jsfiddle.net/e5tjwLb9/2/

такое вложение даёт некоторую "защиту" от того, что класс с подобным именем в другом родительском блоке переопределит такие стили, но это плохой код, так как двойные-тройные-энные селекторы замедляют рендер css, лучше использовать одинарные с БЭМ