[CSS揭秘]菱形图片
场景: 设计师设计了一个菱形区域用来展示图片
与平行四边形一节类似,可以采用将图片用容器包裹起来后旋转45度。同时将内部图片反方向旋转45度(因为容器旋转也会使得内部元素也旋转)。
方案一实现效果:
![](https://images.cnblogs.com/cnblogs_com/joyjoe/1010155/o_db71f0f414be70099bb7934eb06f498b.png)
由于图片的宽度与容器的宽度一致,所以反方向旋转后会产生八边形。解决方案是将图片的宽度设置为容器宽度的142%倍。同时由于图片缩放是相对于容器左上角进行的,因此还要调整图片的边距从而实现菱形图片。
![](https://images.cnblogs.com/cnblogs_com/joyjoe/1010155/o_db71f0f414be70099bb7934eb06f498b.png)
使用scale缩放可以很方便的实现菱形图片,因为缩放的中心点就是图片的中心点。
使用scale思路的方案代码
.picture{
width: 400px;
transform: rotate(45deg);
overflow: hidden;
}
.picture > img{
max-width: 100%;
transform: rotate(-45deg) scale(1.415);
}
以上实现菱形图片的方案也是存在部分局限性的。比如: 要求图片是一个正方形。
终极解决之道是利用CSS3的clip-path属性
参考地址 https://www.w3.org/TR/css-masking/#the-clip-path
关于CSS3的clip-path属性讲解可以参考这篇文章 http://www.cnblogs.com/joyjoe/p/6917036.html
使用CSS3的clip-path来实现菱形图片就非常简单了
img{
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
使用polygon()来绘制一个菱形图案,通过指定4个顶点可以精确绘制出一个菱形,分别是 (50% 0), (1000% 50%), (50% 100%), (0 50%)
实现效果如下:
![](https://images.cnblogs.com/cnblogs_com/joyjoe/1010155/o_db71f0f414be70099bb7934eb06f498b.png)