Как лучше сверстать такие блоки?

Question

[WebforSelf]

Есть такой блок, вот думаю ,придется верстать с position:absolute? сам сайт на сетке бустрапа 4.
Или пробовать через сетку сделать? к примеру в каждом ряду будет по 2 блока, а там уже выбирать какие будут центроваться а какие по краям контейнера.

Нужен совет

Comments

[Алексей Ярков]

Картинкой вставьте ))

[WebforSelf]

Алексей Ярков, Ну вариант хороший) я всё такое дерьмо хочу вставлять картинками)

[Антон Литвиненко]

та не, зачем вам сетка, только намучаетесь. Верстайте как задумали, абсолютом

[WebforSelf]

Антон Литвиненко, да решил раз на WP сайт, то сделать через слайдер революшен, он тут как раз таки используется для главного слайдера.

[Froggyweb]

Круть. мне вот интересно если текст поменяется что будет?
зы SVG картинкой :)

[WebforSelf]

Froggyweb, как такое в SVG то перегнать)

[Максим]

WebforSelf, нарисовать в редакторе - это не сложно или если хватает опыта то рисовать руками

Answer 1

[Максим]

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

Рисовал руками без использования векторных редакторов ....

Comments

[WebforSelf]

Это прям мега крутой пример работы SVG, вместо того чтоб совать absolute и изображения можно таким образом сделать

Answer 2

[Икотий Айтишевич]

Можно поместить изображение в блоки, задать position: absolute; и выровнять относительно центрального объекта.

Либо можно сделать 3 горизонтальных блока. В верхний блок добавить изображения под #2 и #3. В блок ниже добавить изображения с #1, изображение с вопросом и изображение с #4. И в нижний блок изображения под #6 и #5. И выровнять средний блок с помощью выравнивания flex контента, а остальные расположить как Вам надо с помощью margin и padding.

И ещё как вариант сверстать это на гридах.