jQuery обтравочная маска?

Question

Какой лучший плагин jQuery (или любой другой метод javascript), который позволяет мне создать обтравочную маску div.

Предположим, у меня есть маска (треугольник) и изображение. Как я могу показать только треугольную часть изображения с помощью моей маски?

Я не хочу использовать изображения, например: 1 изображение с изображением, над которым я помещаю еще один абсолютный позиционный div (прозрачный .png) с треугольным отверстием в нем.

Soooooo ??? ....: D

Answer 1

Если вы открыты для html5, то посмотрите на элемент холста.

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Canvas_tutorial/Compositing

Answer 2

Если его просто изображение, которое вы хотите маскировать, вы могли бы использовать RaphaelJs библиотеку, которая является кросс-браузер и работает даже в IE6. В основном вы рисуете форму и заполнить его с вашим изображением:

var paper = Raphael(document.getElementById("notepad"), 400, 400); 
var r = paper.g.triangle(200, 200, 190); 

r.attr({ 
    stroke: "none", 
    fill: "url(http://www.bing.com/fd/hpk2/NabobPass_EN-US1703601557.jpg)" 
}); 

Живая демо:

http://jsfiddle.net/eybNG/

Обратите внимание, что в моем примере я использую дополнительные библиотеки gRaphael, что делает его очень легко нарисуйте треугольник. Однако этого не требуется.