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

Question

[Алексей Вечканов]

Подскажите, как бы вы сверстали такие блоки/скосы?



Верстка резиновая.

Answer 1

[Евгений]

Можно как-то так, через SVG:
https://jsfiddle.net/vcoy4p6q/
В итоге все будет резиновое
Вот сам SVG, если надо будет поменять цвет:
Левый:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" preserveAspectRatio="none"><polyline points="20 20 0 20 0 0 " fill="#000000" fill-rule="evenodd"/></svg>

Правый:

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" preserveAspectRatio="none"><polyline points="20 0 20 20 0 20 " fill="#000000" fill-rule="evenodd"/></svg>

Comments

[Алексей Вечканов]

Большое спасибо!

Answer 2

[Андрей]

Можно олдскульно/кроссбраузерно png картинкой, большой шириной (минимум 1920)

Comments

[Алексей Вечканов]

Да, можно, но то что предложил - Евгений Евгений - интереснее всего. Идеально мне подходит.

Answer 3

[Сергей Бондаренко]

Скорее всего это 2 треугольника по бокам и обычный прямоугольник внизу.
Сделать треугольник можно легко стилями: apps.eky.hk/css-triangle-generator

Comments

[Алексей Вечканов]

У меня контейнер резиновый. То есть эти треугольники должны тянуться. А css - фиксированный

Answer 4

[Александр]

Это можно создать с помощью бордеров для элементов https://m.habrahabr.ru/post/126207/

Comments

[Алексей Вечканов]

У меня контейнер резиновый. То есть эти треугольники должны тянуться. А css - фиксированный

[Александр]

Алексей Вечканов: Да, Вы правы, в такой ситуации данный вариант не подходит. Можете глянуть вот пример fainitskaya.ru/portfolio/iqc_maragoni P.S. Я сейчас с мобильного и не вижу каким способом это сверстано.

Answer 5

[semki096]

vuejs.org/examples/svg.html