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

Question

[Ord EO]

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

Answer 1

[forspamonly2]

без картинок такой фон можно двумя линейными градиентами изобразить.

на нижнем резкие переходы от тёмного к светлому и снова к тёмному, а на верхнем под другим углом такие же переходы, но между тёмным и прозрачным.



а псевдоэлементами такое лучше не делать.

Answer 2

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

Ромб это обычный задний фон, ещё можно через псевдоэлементы :after, :before, его там разместить. А в самом блоке ничего нет сложного, даже если вы новичок и хоть как-то изучали вёрстку. Три дива с заголовком, параграфом и кнопкой, даже на мобильной версии ничего менять не нужно.

Comments

[xonar]

3 дива? А почему не 333 ? Нахрена там аж 3 дива?

Answer 3

[Lord_Dantes]

Делаете прямоугольник и наклоняете его вправо, и поворачиваете еще.

https://codepen.io/lord-dantes/pen/jOEmOPJ

Answer 4

[Тарас Шульга]

Как и писали тут два способа, первый через фон(если с ним никаких манипуляций проводит не нужно - это самый простой и адекватный способ.) Второй это через псевдо элемент - но по мне так лишняя морока - это оправдано когда нужны будут какие-то определенные манипуляции.(сдвинуть/повернуть/увеличить/уменьшить при наведении/нажатии и т.д.)