Как правильно сверстать данный блок?

Question

[Linberg07]

Доброго дня, подскажите пожалуйста, как лучше реализовать данный блок? Идет в голову сделать два блока и сместить их по тому как в макете, чтобы высота увеличивалась , но не знаю что за свойство это и есть ли оно вообще. Или же есть способ проще, заранее благодарен за ответ!

Comments

[Ankhena]

Попробуйте еще раз вставить картинку через кнопку в редакторе. Так чтобы её сразу было видно или внутри спойлера.
Но точно без переходов куда-то там на joxi и тем более с редактированием ссылки.

[Сергей delphinpro]

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

[Linberg07]

Сергей delphinpro, спасибо за совет) не знал, вставил сейчас

[Linberg07]

Ankhena, поправил

[Вадим]

блоки можно подрезать с помощью clip-path: polygon()
Сместить с помощью transform: translateY() или отрицательного margin-top.
А переход между блоками - отдельно абсолютно спозиционированным блоком с фоновой картинкой

[Ankhena]

Как правильно сверстать данный блок?

Нет тут никакого правильно.
Разве что попросить дизайнера не отрезать человеку кусок головы в кепке и кисть руки.

Сверстать можно как угодно:
- clip-path и сдвиг
- фон и поверх тексты и кнопки
- комбинации этих решений

Полоски краски тоже можно поверх сделать.

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

[Linberg07]

Вадим, Ankhena, спасибо! clip-path , не знал об этом свойстве, думаю самое то, его буду использовать

[Сергей delphinpro]

ну тут явно блок состоит из двух частей верх/низ.
внутренности каждой части сверстать не проблема - фон и полупрозрачный серый блок с формой.
сложность в косой обрезке. clip-path поможет. если clip-path не подходит, то все еще можно извратиться с несколькими обертками, overflow и transform.
когда два блока будут готовы, останется их совместить. тут уже предложили варианты - смещением с помощью трансформаций или отрицательных отступов.
я бы сделал наложением. Блоки верхний и нижний одинаковой высоты (равно высоте общего блока) и наложение друг на друга гридами или абсолютом. доступность для указателя разруливается свойством pointer-events.
ну и последнее – наложить оверлей с "мазками краски".

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

Блок не самый простой. Но задача, в принципе, выполнимая. Дизайнеру не обязательно вырывать руки =))

Answer 1

[Юлия]

Попробуйте посмотреть в сторону transform: skewY.
У родительского дива будет отрицательное значение, у блока с контентом положительное (для выравнивания текста и картинки).