Diamond shape with rounded corners and background image

Question

I need to achieve this:

Note that the container is rotated but the picture isn't..

And for now I did:

div.img {
  position: relative;
  overflow: hidden;
  width: 320px;
}
div.img img {
  display: block;
  width: 100%
}
div.img span {
  position: absolute;
  content: "";
  width: 75%;
  height: 75%;
  transform: rotate(133deg);
  background: white
}
div.img span.tl {
  top: -36%;
  left: -36%
}
div.img span.bl {
  bottom: -36%;
  left: -36%
}
div.img span.br {
  bottom: -36%;
  right: -36%
}
div.img span.tr {
  top: -36%;
  right: -36%
}

<div class="img">
  <img src="http://lorempixel.com/320/320/nature/?v2s" alt="Pellete">
  <span class="tl"></span>
  <span class="bl"></span>
  <span class="tr"></span>
  <span class="br"></span>
</div>

But I can't find a way to add the rounded corners with this solution...

I thought that maybe would be possible to create a shape and use it as a mask with css and just add it in the container with higher z-index,

Can you think of a better way ?

PD: As a last resort, I'll ask the designer to create a .svg (because with responsiveness with an image won't render properly) with that shape..

Answer 1

If you plan on svg why not use it straight away. You don't need to ask your designer to make it either, you can code it inline, control the rounded corners, the shape... and it's scalable :

svg{display:block;width:30%;height:auto;}

<svg viewbox="1 1 8 8">
  <pattern id="image" width="10" height="10" patternUnits="userSpaceOnUse">
    <image xlink:href="http://i.imgur.com/kreZqnx.jpg" x="0" y="0" height="10" width="10" />
  </pattern>
  <path d="M5.5 1.5 L8.5 4.5 Q9 5 8.5 5.5 L5.5 8.5 Q5 9 4.5 8.5 L 1.5 5.5 Q1 5 1.5 4.5 L4.5 1.5 Q 5 1 5.5 1.5z" fill="url(#image)" />
</svg>

Other points are:

• you can maintain boundaries of the shape for user interactions (click or hover)
• display it on any background (plain color gradient, background image...)

Example :

#shape:hover{
  cursor:pointer;
  fill:gold;
}
body{
  background:url('http://i.imgur.com/5NK0H1e.jpg');
  background-size:cover;
}
svg{display:block;width:50%;height:auto;}

<svg viewbox="1 1 8 8">
  <pattern id="image" width="10" height="10" patternUnits="userSpaceOnUse">
    <image xlink:href="http://i.imgur.com/kreZqnx.jpg" x="0" y="0" height="10" width="10" />
  </pattern>
  <path id="shape" d="M5.5 1.5 L8.5 4.5 Q9 5 8.5 5.5 L5.5 8.5 Q5 9 4.5 8.5 L 1.5 5.5 Q1 5 1.5 4.5 L4.5 1.5 Q 5 1 5.5 1.5z" fill="url(#image)" />
</svg>