Как сделать фон на всю ширину с обрезанным углом (Макет предоставляю)?

Question

[PetrykDima]

ширина контейнера 1100 пикселей, нужно что бы даже при минимальной ширине, фон был обрезанный

Answer 1

[GM2mars]

По моему самый оптимальный способ без гемора это с белыми треугольниками сверху и снизу, или же если всегда будет скрыта часть картинки, просто закрасить часть картинки белым.
Для особо изощренных дизайнеров, можно сделать родительский блок с оферфлов=хидден, в нем картинка и два белых блока поверх, которые css transform повернуты на некоторый угол. Один блок прижат к верху, другой к низу.
Ну такой способ как один из вариантов, и не является практичным.

Comments

[Eediter]

К варианту с transform вспомнился пример схожей реализации.

[PetrykDima]

в итоге сделал главный фон, и сделал триугольник с белый, который прижат к низу, у них background-size: 100%, cover; работает отлично,) думал использовать css фигуры но не успел)

Answer 2

[Сергей Николаевич]

ох уж эти дизайнеры....))
можно положить поверх фона белую трапецию, сохраните под веб с индексными цветами, получиться очень маленькое изображение + это позволит сделать всякие эффекты типа параллакса

Comments

[PetrykDima]

та да, дизайнер от бога конечно... Тоесть нарисовать трапецию, поставить как второй фон, и прижать к низу?

[Сергей Николаевич]

дивы с контентом пойдут последовательно, просто у трапеций див с классом где фон такая трапеция. Если требуется динамическая высота блока с трапецией то делаете div с заливкой белым а для косых углов используйте псевдоэлементы :before :after с небольшим смещением. однажды сделав такой блок потом где угодно его примените. и адаптивность удобно делать в этом случае. для before и after придется вырезать отдельно скосы.

Answer 3

[Евгений Низамиев]

habrahabr.ru/post/126207
Яб трапецию с помощью css сделал.

Answer 4

[Юрий Лобанов]

А что мешает все картинками сделать?

Answer 5

[Виталий Киренков]

2 картинки треугольника. Одна для верха, вторая для низа. Сохраните их допустим в размере 1000(ширина)*100(высота), а стилями задайте ширину 100% высоту 100, ну и абсолютом по блокам раскидайте их.

Answer 6

[PetrykDima]

при уменьшении монитора, треугольник большой по итогу, и начинает лесть в контент

Answer 7

[Александр Борисович]

А у вас как сейчас получается, фон при уменьшении экрана выпрямляется?))