Creating a diamond overlay image using css

Question

how can i build something like bottom image using css.

and also I can make these overlay images always follow the background color.

thanks

Answer 1

What I want to add to Lloan's answer: if you want the images to stay with the orientation that they had and just cut the diamond shape out of them, you need to do something a little different.

In the example below, a square is the shape of a diamond that is visible. The pic is nested in there, so the "square" can correctly crop the edges of the image used. In this way, we can rotate the “square” to be a diamond, and rotate the image back to its original orientation.

.square { width: 100px; height: 100px; margin: 25px; -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); overflow: hidden; } .pic { background: url(http://placekitten.com/g/150/150); width: 150px; height: 150px; margin: -25px; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); } 

 <div class="square"> <div class="pic"> </div> </div>