Как верстать такое?

Question

[Alpha12]

Привет, я верстальщик и да я не умею верстать объекты такого рода, подскажите какой-то мануал или же как найти такое в гугл, нужно объяснить как сверстать правильно такую фигуру

spoiler

Comments

[Дмитрий]

Если есть макет, то коллеги сказали уже способ - бэграундом. Если макет только на десктопную ( в лучшем случае ), тогда идем несколько другим путем.
CSS Grid Layout масштабную сетку сделать нужно, при этом масштаб каждой ячейки и колонки в сетке мизерным делаем (для лучшей калибровки положения элементов), дальше z-index делает свое дело. Если одной сетки мало, вложенную сетку делайте учитывая параметры ячеек родительской сетки. Крайний вариант и самый неприятный - танцы с позиционированием.

Answer 1

[Camaro67]

Картинкой и верстайте, в чем проблема? Задаете блоку в качестве бэкграунда эту картинку, а поверх накладываете все остальное.

Answer 2

[Ankhena]

Варианты:
1. Либо clip-path и трактор отдельно.
2. Либо множественный фон: внизу желтая картинка, поверх 2 треугольника с помощью линейных градиентов, верхний слой - трактор.
3. Либо полностью одна фоновая картинка и все.

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

Как-то так: https://jsfiddle.net/Ankhena/bec9qcyy/
значения свои поставьте

Comments

[Ankhena]

Говорят, иногда не отображается картинка и белых треугольников не видно. Вот с красными https://jsfiddle.net/bbjw7h8f/

Answer 3

[Антон Спирин]

Можно использовать clip-path
Удобный генератор.
can-i-use

Демо

Comments

[Максим Тимофеев]

Можно, но с точки зрения экономии килобайтов - просто картинка - лучше. С точки зрения поддержки браузерами - опять таки просто картинка рулит https://caniuse.com/#search=clip-path
Есть ряд случаев, когда подобное стоит делать через svg, но в данном конкретном - прото картинка - идеальный вариант.
Вариант с svg может быть оправдан, если изначально грузится svg с обычной заливкой, а потом отдельно асинхронно тянем тяжелое фото.

[Максим Тимофеев]

Антон Спирин,

я где-то написал, что этот способ лучше?

А я где-то написал, что Вы не верно ответили? Я даже не знаю деталей ТЗ. Может там параллакс эффект, смена фона или еще чего. Целью было показать автору, в чем может быть минус данного подхода.

[Антон Спирин]

Максим Тимофеев, да, чет я загнул. Все верно написали. Пойду прогуляюсь.

[Максим Тимофеев]

Антон Спирин, )))), бывает. Я думаю знакомство автора с clip-path точно не помешает, так что Ваш ответ явно полезный. Просто решил дополнить, акцентами, что бы не плодить ответы.