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

[Zverushka]

Здравствуйте.

Можно ли реализовать подобное обрезание квадртной фотографии на css? (не обращайте внимание на направляющие линии и выделение).

Edited October 7, 2013 by Zverushka

[klierik]

боюсь кроссбраузерно нет.

проще подготовить готовый результат в ПНГ (если фон не однородый).

Или ЖПЕГ если не предпологаеться _никогда_ менять цвет фона, что достаточно опасно, так как он может сменится.

[SelenIT]

Можно в новых браузерах, поддерживающих 2d-трансформации, по такому же принципу. Если фон однородный (как на картинке), возможно, проще накрыть чем-нибудь (хоть обычным CSS-треугольником из бордеров) часть картинки.

[Zverushka]

Честно не понимаю как сделано, смотрю код и 0. Там нет объяснений или маленький пример хотя бы. возможно я не до конца понимаю как работает visibility: visible. Даже если я сверху треугольник или границу в виде треугольника налеплю - надо кусок картинки обрезать - как его обрежешь? Ведь будет не кривая трапеция, а лишь треугольник тогда.

skew трансформации тоже не подходят - не так фигура будет.

[SelenIT]

Я имел в виду как-то так.

[Zverushka]

Так не пойдет - девушка будет повернутая. Там просто сверху косое обрезание.

[SelenIT]

Повернутая сначала туда, а потом на столько же обратно. Как цветок в примере. У вас как-то по-другому отображается?

[Zverushka]

Ну я сделала с помощью желтого треугольника. Но интересно - можно ли подобное сделать к неоднородному фону? Как бы задать маску для артинки. В первом примере я вижу градиент как-то наложили, значит и картинку можно. Но я не понимаю как.

Повернутая сначала туда, а потом на столько же обратно. Как цветок в примере. У вас как-то по-другому отображается?

А, вот как хитро, хитро блин . Теперь понятно.