Create diamond overlay image using css [closed]

Question

How can I build something like below using css? I want to have a diamond cut-out of an image that does always follow the color of the background.

Answer 1

What I want to add to Lloan's answer: If you want the images to stay with the orientation they had and simply cut out a diamond shape out of them, you'll need to do things slightly different.

In the example below, square is the diamond shape that is visible. Pic is nested in there so that 'square' can properly cut off the edges of the image that is used. This way, we can rotate the "square" to be a diamond, and rotate the picture back to it's original orientation.

body {
  /* To show the background color is no problem here */
  background-color: #efefef;
}

.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>