How to get a diamond shape without cutting the image?

[NielsIm]

Dear CSS-Tricks members,

Today at work there was a discussion about creating an image in a diamond shape without cutting the image! This is because the image must be changed in the CMS by the customer.

Created a simple jsfiddle to show you guys the problem. http://jsfiddle.net/gFtm2/4/

I really hope there is a way to get the job done, with CSS ofcourse!

Thanks,

Niels

[nixnerd]

I don’t know how you plan to make an image a non-square AND not crop the image?

Unless I don’t understand, this defies logic and physics.

[Paulie_D]

I think he means without actually amending the image.

[NielsIm]

I don’t know either, that’s why I came here. To ask the community of CSS-Tricks if there was a way in CSS to ‘hide’ the corners in the way I created them in my jsfiddle example.

[Paulie_D]

Here’s one way…note the image has to be larger than the containing div.

http://codepen.io/Paulie-D/pen/cplje

[NielsIm]

Thank you Paulie_D. That was already really helpfull. If there are other ways to get this done I would love to hear, or what the best way is to do this!

[Author]

Posts