Привет, я верстальщик и да я не умею верстать объекты такого рода, подскажите какой-то мануал или же как найти такое в гугл, нужно объяснить как сверстать правильно такую фигуру
Если есть макет, то коллеги сказали уже способ - бэграундом. Если макет только на десктопную ( в лучшем случае ), тогда идем несколько другим путем.
CSS Grid Layout масштабную сетку сделать нужно, при этом масштаб каждой ячейки и колонки в сетке мизерным делаем (для лучшей калибровки положения элементов), дальше z-index делает свое дело. Если одной сетки мало, вложенную сетку делайте учитывая параметры ячеек родительской сетки. Крайний вариант и самый неприятный - танцы с позиционированием.
Варианты:
1. Либо clip-path и трактор отдельно.
2. Либо множественный фон: внизу желтая картинка, поверх 2 треугольника с помощью линейных градиентов, верхний слой - трактор.
3. Либо полностью одна фоновая картинка и все.
Я бы выбрала 2 или 3 способ, в зависимости от потребностей перестроений для разных экранов.
Можно, но с точки зрения экономии килобайтов - просто картинка - лучше. С точки зрения поддержки браузерами - опять таки просто картинка рулит https://caniuse.com/#search=clip-path
Есть ряд случаев, когда подобное стоит делать через svg, но в данном конкретном - прото картинка - идеальный вариант.
Вариант с svg может быть оправдан, если изначально грузится svg с обычной заливкой, а потом отдельно асинхронно тянем тяжелое фото.
А я где-то написал, что Вы не верно ответили? Я даже не знаю деталей ТЗ. Может там параллакс эффект, смена фона или еще чего. Целью было показать автору, в чем может быть минус данного подхода.
Антон Спирин, )))), бывает. Я думаю знакомство автора с clip-path точно не помешает, так что Ваш ответ явно полезный. Просто решил дополнить, акцентами, что бы не плодить ответы.
