CODEWITHSUNDEEP
cssimagemask
Joe Hamilton
Joe Hamilton

Reputation: 665

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 with 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?

Upvotes: 3

Views: 3604

Answers (1)

Hussein
Hussein

Reputation: 42818

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/

Upvotes: 2

Related Questions