Как сверстать такую чудо юду на бутсрапе?

Question

[Павел]

https://www.dropbox.com/s/x7ghl3aqv53iyb1/f709dab1...
если делать просто картинкой то joxi.ru/1A5ZpBki9yGZrE , подскажите как правильно

Comments

[Сергей Соколов]

Может, в SVG с JS поколдовать? Наверное, прикольно, чтобы сдвигались не картинки, а маски.

[Павел]

Сергей Соколов: возможно , но картинки в png

Answer 1

[Антон Мудренок]

Вообще можно многими вариантами. Самый простой и красивый это clip-path. Но если кто-то ноет про кросс-баузерность, то можно просто сделать skew блока, а потом обратный skew в самом блоке:
https://codepen.io/just-a-training/pen/KqKJNR

Comments

[Павел]

а если в psd уже обрезанная и наклоненная картинка?

[Антон Мудренок]

mrusklon: грузите ее и выкладывайте ссылку, покрутим. Какая разница какая картинка?)

[Павел]

Антон Мудренок: https://www.dropbox.com/s/5m1bh6f2g60fert/niceBtn1...
это картинку надо выпрямить , а затем с помощью кода крутить?)

[Антон Мудренок]

mrusklon: ой камон, вы бы хоть потрудились прямую ссылку на картинку дать лол)

[Антон Мудренок]

mrusklon: вот, уличная магия =)
https://codepen.io/just-a-training/pen/KqKJNR

[Павел]

Антон Мудренок: воу , идеально , теперь наверно другой вопрос создам по js как это сделать плавающим :)