[CSS揭秘]菱形图片

场景: 设计师设计了一个菱形区域用来展示图片

与平行四边形一节类似，可以采用将图片用容器包裹起来后旋转45度。同时将内部图片反方向旋转45度(因为容器旋转也会使得内部元素也旋转)。

方案一实现效果:

由于图片的宽度与容器的宽度一致，所以反方向旋转后会产生八边形。解决方案是将图片的宽度设置为容器宽度的142%倍。同时由于图片缩放是相对于容器左上角进行的，因此还要调整图片的边距从而实现菱形图片。

 

 

 

使用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%)

 

实现效果如下: