钻石形状与圆角和背景图像

我需要实现这个目标:

请注意,容器已旋转但图片不是..

现在我做了:

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%
}

html, body {
  margin: 0;
  padding: 0;
}

img {
  width: 200px;
  height: 200px;
  -webkit-clip-path: url(#svgPath);
  clip-path: url(#svgPath);
}