Как реализовать верстку этой секции?

Question

[Стефан Сотников]

Имеется секция. В ней блок с 2-мя фото.

Меня интересуют варианты ее исполнения
Вот мои варианты
1) Фотка главная - прямоугольник через before
2) Прямоугольник - фотка через after
3) Обернуть в еще 1 контейнер и сделать фотку абсолютом
Вот общий вид для большего понимания

Answer 1

[Ankhena]

Фото с подписью. Значит это figure, в ней img и figcaption.
Для figure задаете before или фон линейным градиентом с четкими границами.
Всё.
Как-то так https://jsfiddle.net/6wgbk13e/
Размеры и цвета свои поставьте.

Answer 2

[AngReload]

К картинкам псевдоэлементы не прикрутишь. Только вариант 3. Хм, хотя можно и второй.

Comments

[Атланта]

Я не понимаю, что как вставлять фоновые картинки. Ведь они вставляются в эти цветные прямоугольники, что на заднем фоне, а не в квадраты. Почему вообще целесообразно усложнять логику, добавляя псевдоэлементы? Мне казалось всё кристально просто и реализуется через div.

[AngReload]

Атланта, картинки вставляются так:
https://codepen.io/anon/pen/ZqxxYG

Да, мне тоже кажется что проще и аккуратнее без псевдоэлементов. Просто так получилось :)

Answer 3

[Юпитер Макс]

просто делаете контейнер главный, в него для фотки блок с левым флоатом. Главному контейнеру через before делаете задний фон.