Как сделать картинку непрямоугольной формы?

Question

[vladHD]

собственно ВОПРОС, как правильно реализовать данную картинку неправильной формы ? есть мысли накинуть на абсолюте бефор/афтер элементы(сделать бордерами треугольники), но тогда вопрос с респонсив ..
вариант номер два- clip-path?

Answer 1

[Алексей Зуев]

Варианты:
transform: skew с изображением-background jsfiddle.net/yurzui/bLLhwwvq
transform: skew с инлайн img jsfiddle.net/yurzui/23khe2kz
transform: rotate с инлайн img jsfiddle.net/yurzui/z47ugwLh/
svg с инлайн img jsfiddle.net/yurzui/z47ugwLh

Comments

[vladHD]

хорошо, а вариант не с бекграундом, а просто картинкой ?

[Алексей Зуев]

vladHD: там разве сложно картинкой сделать?

[vladHD]

спасибо Вам, хорошие решения, берем на вооружение, а что с поддержкой браузеров ?

[Алексей Зуев]

vladHD: хорошая поддержка, caniuse вам в помощь

[vladHD]

отлично, а может у Вас там где-то рядышком есть похожие решения, когда на тех же лендингах например просто блоки клиновидной формы, Вы эти же техники применяете ?

[Алексей Зуев]

vladHD: погуглите любые landing page со скошенными углами (их море в интернете), и увидите техники. Пример скошенных

[Алексей Зуев]

vladHD: unusual-and-creative-angles-and-shapes-in-website-...