Как сверстать эту секцию?

Question

[Михаил]

Всем привет. Подскажите, пожалуйста, как сверстать эту секцию?
Как картинкам в блоках придать такую форму, и чтобы совпадало с волной на фоне?



Заранее всем спасибо)

Comments

[WapSter]

Довольно интересный макет, совет ниже лучший и пожалуй единственный вариант. Можешь поделиться макетом, если не жалко?
Upd: не единственный, если белая волна отдельный слой, то можно вырезать png и вставить слоем выше, подставить методом проб карточки, чтобы волна совпадала. С svg все равно лучше

[Михаил]

Тимур Турсунбаев, да мне не жалко, проект коммерческий, не могу)

[WapSter]

Михаил Семёнов, он будет использоваться исключительно ради портфолио, и очень не скоро. Пожалуйста)

[HamSter]

Все обычными картинками и не выдумывать! Т.е. фон волну эту, и картинки внутри карточек в такой же форме и сохранить\вставить.

[Сергей delphinpro]

Тимур Турсунбаев, да, крайне интересный макет. положу в заладки, поверстаю на досуге =). Склоняюсь к идее использования svg clip-path

[Сергей delphinpro]

хотя внизу уже сделали…

Answer 1

[forspamonly2]

Максим Ленский, вполне реально и с добавлением блоков сделать, и дивками, и чтобы тянулось.

Comments

[Михаил]

отличное решение! благодарю)

[Максим]

я же не говорил что такого не бывает ..

Answer 2

[Максим]

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

Comments

[Михаил]

Будет статично, тогда каким образом лучше сделать?

[Максим]

Михаил Семёнов, две маски на svg либо два обтравочных контура ...я щас сам попробую а то в теории знаю ..момент -- с час или с пол часа ...

[Михаил]

Максим Ленский, спасибо)

[Максим]

Михаил Семёнов, https://codepen.io/topicstarter/pen/ardbew вот так примерно ...я там чуть чуть накосячил но смысл должен быть ясен

[Михаил]

Максим Ленский, благодарю. Но с div-ами никак получается?

[Максим]

Михаил Семёнов, геморой это ...clip-mask css ни везде поддерживается ,можешь почитать про это а на svg гарантия того что будет 100% выглядеть одинаково в плоть до 8IE

[Михаил]

Максим Ленский, номер телефона можешь дать? 100р закину

[Максим]

Михаил Семёнов, https://codepen.io/topicstarter/pen/ardbew вот чуть чуть переделал

Answer 3

[RAX7]

Еще вариант

Answer 4

[profesor08]

Три колонки и фон под ними. Размер фона зависит от ширины бока, как и колонки. Раз их размер меняется одинаково, значит достаточно будет подвинуть фон. А дальше браузер сам все сделает.

P.S. Не забудьте оторвать ноги дизайнеру. Задача выполнима, как на css, так и на js, но я сомневаюсь, что дизайнер компетентен в этом вопросе. Да и вообще такую хрень лучше не генерировать в фантазиях, выглядит так себе, смысла ноль.

Comments

[Lord_Dantes]

Знаете типо "волна волна волна - по е*алу на!" Дизайнер огонь вообще как такое можно придумать