Как сделать высоту треугольников равной высоте родителя?

Question

[Никита Траторов]

Уважаемые коллеги!
Я переделываю один полезный сниппет для Bootstrap. Сниппет создает адаптивный перечень шагов (какой-либо план).
Получилось почти всё что надо, однако высота CSS-треугольников не поддается. Возможно метод выбран не очень удачный. Результат на картинке. Решение практически одинаково отображается во всех браузерах. При сжатии экрана - превращается в список. Кому надо - пользуйтесь, но помогите, пожалуйста, довести до ума.
https://jsfiddle.net/c02wry4x/

Comments

[Никита Траторов]

А если заглянет искушенный верстак, то может быть он предложит еще и решение на флексах под Bootstrap 4? Заранее благодарю.

[Андрей Саныч]

по ссылке совсем ничего не сделано. Или так и должно быть?

[Никита Траторов]

Андрей Саныч: А вы ширину iframe с HTML увеличьте больше 992px

[Андрей Саныч]

Никита Траторов: для начала главному контейнеру .container дайте overflow: hidden;
А потом надо поиграться))

[Никита Кит]

а зачем треугольники? Это просто две черты. Типичные before и after у каждого item.

[Никита Траторов]

Андрей Саныч: читерство, но работает! Спасибо. Однако появилась проблема на Маках - родитель режет контент, и высота стрелки не тянется, обрезая текст в трехстрочной стрелке.

[Никита Траторов]

Вот немного улучшенный вариант, когда текст по вертикали выровнен.
https://jsfiddle.net/6q2yowno/3/

[Никита Траторов]

Никита Кит: предложите свое решение. Сейчас, как Вы и говорите, использован before и after у каждого item. Можно before и after заменить на span. Дерзайте. Главное, чтобы во всех браузерах и адаптивно.

[Никита Кит]

Никита Траторов: Я и так по 40 часов в неделю + допработы дерзаю. Для меня подобные вещи уже просто никак не интересная рутина. https://codepen.io/ShadowOfCasper/pen/oejvVW - хоть от css отписывайся...

[Никита Траторов]

Никита Кит: Большое спасибо за Ваш вариант. Хотя он и не учитывает всего, что задумано, он демонстрирует вариант визуализации стрелок. Целью были не сами стрелки, хотя и Ваши не до конца адаптивны https://codepen.io/anon/pen/jLbwgr?editors=1100

[Никита Кит]

Никита Траторов: почему? До конца. Горизонтальный скролл только сделать. Хотя на мобилках и дефолтный нормальный. Да, поддержку с переходом цветов придётся только разве что костылить. Я бы внутрь оверлей положил в каждую стрелку снизу и всерху и сдвинул по skewY. Но мне уже впадлу это дописывать. Мне достаточно знать что так можно сделать. А у вас есть идея реализации. Дерзайте

Answer 1

[Никита Траторов]

Кроссбраузерное решение в итоге:
https://jsfiddle.net/6q2yowno/4/
Спасибо Андрей Саныч за подсказку!

Comments

[Никита Траторов]

Но тоже стоит заметить, что начинаются проблемы при контенте в 4 строки. Треугольники так и не стали адаптивными. Нужно другое решение, например как предлагали Сергей и Максим Ленский - с искривлением бэкграунда.

Answer 2

[Максим]

https://codepen.io/simkaUser/pen/dzoxRB я там запутался но в целом без бутстрап и просто

Comments

[Никита Траторов]

Я так понял, что Вы намекаете на решение с треугольниками. Надо разобраться. Спасибо.

[Никита Траторов]

Погнуть фон - это тоже гениально!

[Максим]

Никита Траторов: за то просто ... без лишних куч кода а адаптировать дело 10е