[mmkulikov]

Вопрос к знатокам.
Есть вот такой макет "хлебных крошек" https://yadi.sk/d/yRePx9m0cRTsS
И так и этак кручу и ничего толкового в голову не лезет как ЭТО сверстать с использованием только CSS
Главный "проблемный" момент - это наличие "бесшовного" неоднородного фона, т.е. из лево+центр+право
"склеить" не удастся (не сойдется фон)
Кто может "подкинуть" какую идею?

[3s777]

mmkulikov, используйте псевдоклассы after before и прописывайте начало и хвост стрелочек этими псевдоклассами. Делайте стрелочки прозрачным png файлом и фон вам вообще по боку будет.
Также можно объединить начало и конец стрелочек в один png файл с прозрачным фоном.

[photomakes]

Нужно придерживаться принципа "подумай как верстать, а потом рисуй"))
Занимаюсь вёрсткой и здесь не могу дать дельного совета, кроме как перерисовать.

[mmkulikov]

3s777, А ничего, что есть два неоднородных фона, на самих стрелках и основной бэкграунд. Прозрачные after before будут "просечивать" фон своего владельца, т.е. тот-же полосатый фон, а не фон лежащего ниже бекраунда

[3s777]

mmkulikov, может такой вариант, только вместо цвета пишите свой фон
http://exabyte.ws/html-i-css/sozdaem...ile-flat.html/

[mmkulikov]

3s777, Вы разбирались с технологией построения "уголоков" в приведенном Вами примере? Там используется "эффект" стыковки border под 45градусов, соответственно определенные стороны border имеют цвет background
Как Вы себе представляете задать у border вместо цвета рисунок?

---------- Сообщение добавлено 14:36 ---------- Предыдущее 14:13 ----------

photomakes, Я с Вами абсолютно согласен, но я не могу перерисовать макет заказчика

[photomakes]

mmkulikov, попробуйте тогда объяснить, что подход в дизайне неверный. Перерисовать — верное решение, чем возиться с этим.

[brainix]

mmkulikov, предлагаю порезать фон как на картинке внизу. Конечно нарезать придется немало, потому что разные ширины и эти насечки фона на подложке крошек.



Красным выделены разные куски подложки. Где просвет - там прозрачность. Естественно резать в png.

[photomakes]

Красным выделены разные куски подложки. Где просвет - там прозрачность.

Будут случаи когда паттерн не будет совпадать, ведь ТС пишет:

Главный "проблемный" момент - это наличие "бесшовного" неоднородного фона, т.е. из лево+центр+право
"склеить" не удастся (не сойдется фон)

[brainix]

photomakes, потому я и написал что нарезать придется немало.
Если второй блок (под "информационные технологии") широкий, то первая стрелочная подложка такая, если узкий то такая. Соответственно и с третьей стрелочной подложкой так же.

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

Если непонятно о чем я - спросите - потом могу картинку сделать.