通过css裁切图片为菱形图片

在web设计中，把图片裁切成菱形图片展示是一种常见的需求，通过photoshop直接将一张图片裁剪成菱形是一种解决方案，但不是最佳解决方案，这里笔者直接通过css设计了两种方案，来实现让图片菱形展示。

以以下图片为例：



我们想要这张图片以菱形的效果展示，这里是不能让图片直接通过rotate来旋转实现的，直接让图片旋转，那图片的内容也就倾斜了。我们想要的效果图是这样的：



这里介绍两种方法。

第一种：

<div class="picture">
<img src="img/img.jpg"/>
</div>

.picture{
width: 100px;
transform:rotate(45deg);
overflow: hidden;
}
.picture>img{
max-width: 100%;
transform: rotate(-45deg) scale(1.42);
}

这里用到了两个标签，注意内层图片反向旋转之后要通过scale进行放大处理，否则会出现八边形的样子。

第二种：

这种方法更加直观有效，而且效果表现更佳。

还是以上面标签中的图片为例，这里只操作img标签，也仅仅只需要这一个标签就可以，通过对这个img标签添加以下样式就可以实现：

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);

只需要添加这一个样式就可以实现和第一种方案同样的效果，而且采取这种方案，也可以完美的处理非正方形图片，使其成为菱形图片展示，第一种方案在非正方形图片的处理上是有问题的。

这里再增加一个小技巧，通过clip-path属性，再配合动画，可以实现由菱形图片复原的效果，代码如下：

img{
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
transition: 1s clip-path;
}
img:hover{
clip-path: polygon(0 0, 100% 0,100% 100%,0 100%);
}

鼠标悬停到图片上时，图片会平滑的扩展为完整的图片，读者可以亲手尝试一下。