Как сверстать такой блок?

Question

[godsplane]

Я думал сделать как-то так, но если применять transform:skew, то картинка внутри блока тоже искажается, какие есть варианты верстки такого? Адаптивно. Вот что я набросал: Песочница.

Comments

[Ярослав Иванов]

Блок в блоке.
Внешнему skew вправо
Внутреннему skew влево

[godsplane]

Ярослав Иванов, ну я так и делал, все просто встает на свои места

[historydev]

godsplane, clip-path

[godsplane]

Владимир, Это экспериментальная технология
Так как спецификация этой технологии ещё не стабилизировалась, смотрите таблицу совместимости по поводу использования в различных браузерах. Также заметьте, что синтаксис и поведение экспериментальной технологии может измениться в будущих версиях браузеров, вслед за изменениями спецификации

[historydev]

godsplane, вы умничать пришли или за помощью? Достаточно было того - что не подходит, svg вам в помощь, он работает скорее всего больше лет, чем вам.

[godsplane]

Владимир, простите если задел ваше раздутое эго

[godsplane]

Владимир, специально загуглил, я все таки постарше svg

[historydev]

godsplane, моё эго таких как вы на завтрак кушает

[WapSter]

godsplane, способ который описал Ярослав Иванов работает, видимо ты что-то делаешь не так.

[godsplane]

WapSter, да точно, не знаю в чем была моя ошибка, но rax7 написал правильное решение, хот яя вроде так же делал

Answer 1

[RAX7]

Answer 2

[Максим]

Вот так на SVG

Второй вариант на SVG pattern