Вырезать определенную часть картинки

[Vibe]

Сидя на просторах интернета в поисках интересного макета попрактиковаться наткнулся на один, но столкнулся с проблемой. Каким образом можно установить эту картинку поверх блока с фоном? Имею в виду картинку справа, отделенной как бы кривой линиией? Имею в виду не просто вырезать её из псдшника в формате .png, а оформить какими-нибудь CSS свойствами

Edited November 14, 2016 by Vibe

[klierik]

17 минут назад, Vibe сказал:

Имею в виду не просто вырезать её из псдшника в формате .png, а оформить какими-нибудь CSS свойствами

суть вопроса не совсем ясна

[Vibe]

Только что, klierik сказал:

суть вопроса не совсем ясна

Как можно вот так обрезать прямоугольную картинку при помощи css?

Edited November 14, 2016 by Vibe

[klierik]

можно попробовать что-то из этого — http://www.w3schools.com/css/css3_2dtransforms.asp

но, скорее всего, это будет влиять на содержимое div. проще всего это картинку просто обрезать в Photoshop

[wwt]

https://jsfiddle.net/caa1g5w2/

 

UPD Забыл z-index'ы расставить https://jsfiddle.net/caa1g5w2/1/

[Sensei]

можно так сделать https://jsfiddle.net/caa1g5w2/2/