Можно ли накладывать/объединять блоки с наружным изображением?

Question

[blackSnail]

Привет, Хабр! Я столкнулся с проблемой, решение которой так и не смог найти.
Суть вопроса в том, что у меня есть 4 блока с контентом, белым фоном и svg изображением, которое находится на верхнем уровне.
Пример:



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

В идеале нужно сделать 1 svg на уровне с 4 div, которое через mask будет накладываться на блоки. Но у меня сломался фон и контент улетел ниже уровня изображения. z-index проблему не решил. Делать 4 отдельных изображения фоном тоже не очень хорошая идея (как мне кажется). Это добавляет лишние @media и кучу кода в разметке.

Comments

[Ankhena]

Иконки отдельно, точки отдельно. Точки позиционировать с помощью bg position. Раз блок по своей сути не подразумевает переполнения.
Вообще, точки очень странно выглядят.

p.s. и не нужно спамить тегами.

[blackSnail]

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

[Ankhena]

Сергей delphinpro

точки - это скорее направляющие

это первое о чем подумала, в частности их цвет на это намекает. Но тогда траектория расположения иконок вообще ничем не оправдана. С другой стороны, мы не видим весь макет, черт знает, что в голове у дизайнеров.
А с третьей стороны, тогда вообще не понятно в чем сложности верстки :)
Поэтому решила прокомментировать верстку точек.

[blackSnail]

Ankhena,
В общем, в чем прикол. Там ничего сложного, за исключением того, как по красоте точки расставить. и сильно с @mdeia не возиться когда это

становится как это


Ну как порнография выглядит если честно)
Но я пока сдался и в 4 разные картинки эти точки закинул.

[Ankhena]

blackSnail, в 4 не ясно зачем.
Я бы спросила дизайнера, как он себе представляет переполнение этих блоков.

[ksnk]

Могут ли блоки внезапно увеличится -уменьшится, так чтобы вмещалось не 2 точки сверху снизу, к примеру, а 3 ? Почему 4 разных картинки для 4-х разных блоков -это плохо? Дорисовать к иконкам точки - не будет ли решением? Вроде никакого итерактивного смещения не предполагается ни при изменении размера ни при адаптивности? или я не прав ?

Технически - ничего сложного поставить всю эту красоту одной картинкой и позиционировать ее бякграундом с нужным позиционированием. Если порядок пунктов меню не будет меняться, то вместе с иконами

[blackSnail]

ksnk, скорее всего могут да. Тут опять ничего непонятно и связи с дизом нет. Вообще никто не отвечает лол.
Это не плохо, но как по мне это немного не правильно в этом случае.
Возможно и так можно - зависит от того, как там дизайнеры видят это все. А они даже под мобильные не рисовали. У меня все шаблоны чисто под 1440р

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

[Ankhena]

blackSnail,

и сильно с @mdeia не возиться когда это

я не вижу изменений в media кроме bg size.
Проблемы могут начаться только при переполнении.

Альтернатива: задавать точки как фон нижнего блока.
Маленькие блоки делать прозрачными.
Остальное закрашивать бордерами, тенями, псевдиками для маленьких блоков.
Проблема переполнения будет решена для +/- пары строк. Иначе положение иконок на траектории всё равно съедет.
Либо JS.