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

发布时间：2020-12-14 19:43:43 所属栏目：资源来源：网络整理

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

如何使用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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!