菱形图片

在网页设计中，把图片裁切成菱形主要有两种方法。一种是基于元素嵌套方案，另外一种是裁切路径方案

元素嵌套方案

将图片用一个<div>包裹起来，对这个<div>变形，然后对图片应用相反的变形。

.picture{    width: 250px;    height: 250px;    transform: rotate(45deg);    overflow: hidden;}.picture > img{    max-width: 100%;    transform: rotate(-45deg) scale(1.42);//图片需要扩大1.42倍去填满整个菱形区域}

裁切路径

使用元素嵌套方案虽然可以实现目的，但是兼容性并不好，如果图片不是正方形，结果就会严重变形。另一种方法是使用裁切路径属性。