使用CSS创建钻石叠加图像

Question

我该如何使用CSS构建下面的内容？我想要一个钻石形状的图像，它始终跟随背景颜色。

- Jeg Bagus

---

你可以使用任何照片编辑软件，如Photoshop，然后在编辑后使用图片。 - Anurag-Sharma

不，我需要使用CSS来创建它。我有一种方法可以做到，但我认为这不是最好的解决方案。 - Jeg Bagus

你在说什么方式？ - Anurag-Sharma

嘿，你尝试过CSS的clip属性了吗？ - Anurag-Sharma

我已经投票支持重新开放这个问题，因为 (a) 这是一个人们通过谷歌不断寻找答案的真实问题，(b) 它是可以回答的。 - Sumurai8

Answer 1

我想要补充Lloan的回答：如果你想让图片保持原来的方向，并简单地从中裁剪出一个菱形，则需要稍微不同的操作。

在下面的示例中，"square"是可见的菱形。Pic嵌套在其中，以便“square”可以正确地切掉所使用的图像的边缘。这样，我们就可以将“square”旋转为菱形，并将图像旋转回其原始方向。

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>

- Sumurai8