Как такое сделать на CSS?

Question

[Тимофей Усулов]

Собственно из картинки все понятно)

Answer 1

[Рюрик Ростиславич]

css-breadcrumbs-and-multi-step-indicator

Comments

[Тимофей Усулов]

Благодарствую!

[Сергей Горячев]

С картинками? Не серьезно для 2017.

Answer 2

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

Держи
codepen.io/aliencash/pen/VPxodG

Comments

[Тимофей Усулов]

Огонь!

[Максим]

ТУТ прям какой то косяк нарисовался ! хотя решение офигенное

[Сергей Горячев]

. Shadow: угу, я тоже попробовал картинку. Решение тоже понравилось, четкое)

[Максим]

Sergey Goryachev: вот так вопрос снимается : codepen.io/Geyan/pen/JEZPbe

[Сергей Горячев]

. Shadow: Ну, не знаю, мне мое решение нравится. https://jsfiddle.net/webirus/rt9484z8/1/
Если это хлебные крошки, то блок и ссылка будут, а следовательно, не стоит проблемы сделать 2 афтер и 2 бефор. Да даже если не крошки, добавление одного спана не сломает сильно ничего.

[Сергей Горячев]

. Shadow: вот так согласен, решение явно лучшее)))

[Сергей Горячев]

. Shadow: попробовал с ховером, тоже работает.

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

Я бы рекомендовал оставить html и body в покое. )

[Максим]

Андрей Федоров: почему html и body нельзя трогать ? если к примеру добавить background-image то косяк 100% видно во всех броузерах ! а так исправили ни чего страшного

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

. Shadow: Косяк появляется потому, что у вас для html и body одна и таже фоновая картинка, но в html есть отступы. В глючном примере удалите фон для body и все исправится. Я не сказал, что нельзя трогать. Но я бы, по возможности, не стал бы вешать на них фон.

[Максим]

Андрей Федоров: я конечно не спорю ! но вроде бы Gekko не понимает если вешать фон на body но хорошо понимает когда на html , в отличии от webkit которые понимают body но не html , это я вычитал гдето

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

. Shadow: И это вас не убедило, что дополнительный <div class="container"></div> лучше?

[Максим]

Андрей Федоров: вот откройте вот это : codepen.io/Geyan/pen/oByvmv в Хроме и посмотрите видит ли Хром высоту body без html ! ??

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

. Shadow: Все правильно, но вопрос тут не в хроме и не в body, а в том, что высота 100% - это не высота окна браузера, а высота внутреннего контента. Если какие-то браузеры делают по другому - они не правы. Я предлагаю давать height: 100vh и не иметь таких проблем никогда.

[Максим]

Андрей Федоров: это вы уже манипулируете ! просто поставить html,body и всё начинает работать с процентами ! я как раз так и пишу код что бы крассбраузерно и кроссплатформенно !

[Максим]

Андрей Федоров: вот после таких маниацляций ВАШ КОД совершенный , за исключением padding : codepen.io/Geyan/pen/oByvmv

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

. Shadow: Если б я манипулировал, я бы сказал что мне нравится 3я слева - у нее татух нет и помоложе. )

[Максим]

Андрей Федоров: лан поХ мне ваще ! сорри за мои пять копеек

Answer 3

[Сергей Горячев]

https://jsfiddle.net/webirus/rt9484z8/
Простой список ul>li, внутри ссылки a и сам текст. Добавляем after и before к блоку и ссылке.
Не нужно никаких генераторов "крошек". Тем более с использованием картинок.
Решение Андрей Федоров интереснее, но не получится с фоном картинкой решаемо.

Comments

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

Ну, в вопросе заливка цветом. Но да, вы правы, с фоном-картинкой не прокатит.

[Максим]

я про решение Андрея Федоров , смотри какая фигня получается : codepen.io/Geyan/pen/JEZPbe

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

. Shadow: А я имел в виду фоновую картинку для каждого блока с текстом. Для фона страницы ясно что все просто и решаемо.

[Сергей Горячев]

Андрей Федоров: Да просто косяк был сразу, решать не пытались :))) А так да, решается)))