开发者

css triangle mask

I would like to create a theme for tumblr where two images are overlayed to appear as one image. The two images would be positioned one on top of the other wi开发者_StackOverflow中文版th the top image masked in the shape of a triangle.

Here is a photoshop mockup of what I am hoping to achieve: http://s3.amazonaws.com/data.tumblr.com/tumblr_l6w6w3sdM51qa49m9o1_1280.png?AWSAccessKeyId=0RYTHV9YYQ4W5Q3HQMG2&Expires=1298329479&Signature=cUcRVwOWEp6m%2BDDnJgTs81rhPxA%3D

The only bit I am unsure about is the masking of the triangle image. Not sure if it is possible... Any ideas?


For cross browser compatibility, you need to create your mask as a transparent image in the shape you like. See my link below. I create a triangular mask in photoshop and applied it to an image.

Check working example at http://jsfiddle.net/39VG9/1/

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜