html – 使用css创建菱形叠加图像

概述如何使用css构建类似下面的内容？我想要一个始终遵循背景颜色的图像的钻石切割. 我想要添加到Lloan的答案中：如果你想让图像保持原有的方向并简单地从它们中切出钻石形状,你需要做的事情略有不同. 在下面的示例中,square是可见的菱形. Pic嵌套在那里,因此’square’可以正确地切除所使用图像的边缘.这样,我们可以将“正方形”旋转为菱形,并将图片旋转回原始方向. body { /* T 如何使用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 >  <div >  </div></div>

总结

以上是内存溢出为你收集整理的html – 使用css创建菱形叠加图像全部内容，希望文章能够帮你解决html – 使用css创建菱形叠加图像所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。