如何使用css构建类似下面的内容？我想要一个始终遵循背景颜色的图像的钻石切割.
解决方法
我想要添加到Lloan的答案中：如果你想让图像保持原有的方向并简单地从它们中切出钻石形状,你需要做的事情略有不同.
在下面的示例中,square是可见的菱形. Pic嵌套在那里,因此’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>
