Вёрстка прижатых друг к другу треугольных div'ов с фонами

[Esser]

Как это можно реализовать? Обратите внимание, что оба блока имеют фон, это самое сложное. Если использовать псевдоклассы или вспомогательные div в виде треугольников, то на них background не распространяется, основные секции остаются прямоугольными. Нужно применять svg (который я почти не знаю) или можно как-то проще сделать?

 

[Igor Schnaider]

У меня вот так получилось.

Не уверен, правда, что это хорошее решение.

[Great Rash]

А положить сверху полупрозрачную белую png-картинку не модно?

[Esser]

А положить сверху полупрозрачную белую png-картинку не модно?

 

Путём абсолютного позиционирования и z-index? Дело в том, что в этих блоках находятся ещё другие картинки и текст, вот более полная версия. Спасибо, я попробую ваше решение, но я думал, что есть и другие способы.

[Great Rash]

http://codepen.io/GreatRash/pen/XXoxjb

[Esser]

http://codepen.io/GreatRash/pen/XXoxjb

Я думал вы просто совет датите, а тут даже пример сделали, спасибо Но дело в том, что в примере всего один фон, который в body. Если задать div фон, например вот так

то видно, что оба — блок и секция, по-прежнему прямоугольные и псевдоклассы не спасают положение. Я могу, конечно, вырезать в макете фотошопа одну огромную картинку и сделать всё одним фоном, но, мне кажется, это не самое лучшее решение.

Можно ли как-то задать форму div, помимо прямоугольной?

[Igor Schnaider]

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

Мне кажется, это самое простое и надежное решение будет :-)

[andrey7287]

не модно?

 

 

Щяс вроде svg в тренде.

[Great Rash]

Эт смотря под что верстать. У многих ещё в требованиях ИЕ8 и даже 7 есть.

[Esser]

У меня вот так получилось.

Не уверен, правда, что это хорошее решение.

Мне нравится ваше решение, оно работает Единственное, там место стыка блоков было "лесенкой", но я это исправил, спасибо.