7

如何使用 css 构建类似下面的东西?我想从始终遵循背景颜色的图像中切出钻石。

钻石覆层

4

1 回答 1

11

我想在 Lloan 的回答中添加什么:如果您希望图像保持它们的方向并简单地从它们中切出菱形,您需要做一些稍微不同的事情。

在下面的示例中,正方形是可见的菱形。Pic 嵌套在其中,因此“正方形”可以正确切断所使用图像的边缘。这样,我们可以将“正方形”旋转为菱形,然后将图片旋转回原来的方向。

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>

于 2013-06-23T08:30:43.440 回答