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

我需要实现这一点：

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

现在我做了：

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>

但是我找不到一个方法来添加圆角与这个解决方案…

我以为可能会创建一个形状,并将其用作具有CSS的掩码,并将其添加到具有较高z-index的容器中,

你能想到一个更好的方法吗？

PD：作为最后的手段,我将要求设计者创建一个.svg(因为与图像的响应不能正确呈现).

解决方法

如果你计划svg为什么不直接使用它.您不需要要求您的设计师做任何事情,您可以直接编码,控制圆角,形状…及其可扩展性：

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>

其他要点是：

>您可以保持用户交互形状的界限(点击或悬停)
>在任何背景上显示(纯色渐变,背景图像…)

示例：

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