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

Question

我需要实现这个目标:

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

现在我做了:

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(因为对图像的响应能力不能正确呈现).

Answer 1

如果你计划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>

Answer 2

CSS3 clip-path绝对是最灵活的方法-您可以根据需要使用SVG定义图像剪辑。

这是一个了不起的工具。但是，默认情况下它不提供圆角正方形，因此您可能必须编写自己的SVG（尽管实际上并不困难）。

如果您想更深入地了解，请阅读MDN doc。

请注意：并非所有主流浏览器都支持此功能，请检查caniuse以了解浏览器兼容性。

关于您的帖子的示例如下：

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

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

<img src="http://lorempixel.com/320/320/nature/?v2s">
<svg height="0" width="0">
  <defs>
    <clipPath id="svgPath">
      <path d="M 95 5 Q 100 0 105 5 L 195 95 Q 200 100 195 105 L 105 195 Q 100 200 95 195 L 5 105 Q 0 100 5 95 Z" />
    </clipPath>
  </defs>
</svg>