在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%);
}
鼠标悬停到图片上时,图片会平滑的扩展为完整的图片,读者可以亲手尝试一下。