如何用CSS代码实现网页设计中的菱形图片

在网页设计中，我们常常能够看到被裁切成菱形的图片。

传统的实现方式是预先在图像处理软件中把图片裁切好，当然这种方式的可维护性差。

而现在，随着CSS的新特性的支持度越来越好了，CSS也越来越强大，我们已经可以用CSS代码来实现菱形图片了。

1. 基于tranform的实现方法

原图用一个<div> 把图片包裹起来，对这个容器<div>应用transform:rotate(45deg), 进行旋转45度，我们得到如下的效果：图片应该也会跟着旋转了

div{
    width:200px;
    transform: rotate(45deg);
    overflow: hidden;
};

如果我们对里面的图片进行反向旋转45度，那么图片的旋转就会抵消掉。看看效果。

    div>img{
        max-width:100%;
        transform: rotate(-45deg);
    };

我们得到了一个裁成八边形的图片。

问题出在哪里呢？我给外面的div加一个边框，这样就容易看出来了。

问题出在了这里图片的宽度是与容器div的边长相等，其实我们应该让图片的宽度与对角线相等。

运用勾股定理，可以计算出图片的宽度应该是√2倍，我们取1.42倍。

如果通过width属性设置来放大图片,会得到如下的效果。

    div>img{
        width:142%;
        max-width:142%;
        transform: rotate(-45deg);
    };

因为是以图片的左上角为原点进行放大的。我们还需要在通过设置margin:-45px;才能得到菱形图片。

    div>img{
        max-width:142%;
        transform: rotate(-45deg);
        margin:-45px;
    };

当然，我们可以通过transform:scale(1.42)来放大图片1.42倍。scale()是以图片的中心点进行缩放的，这样我们就不用额外地设置margin值了。

div>img{
    max-width:100%;
    transform: scale(1.42) rotate(-45deg);
};

2. 基于裁切路径 clip-path 方法

第一种方法虽然可以奏效，但存在一些缺点：

1.需要一层额外的HTML标签；
2.代码不够直观；
3.如果处理的图片不是正方形，将无法得到一个菱形图片，如下图所示：

SVG中，有个名叫<clipPath>的元素，专门用来定义剪裁路径。其实CSS中也有一个类似的属性，即clip-path属性。

clip-path可以把元素裁切成我们想要的任何形状。我们通过polygon()函数来指定一个菱形，参数是一系列用逗号分隔的坐标点。

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%);
}

注意，除了谷歌浏览器，其他浏览器对这个clip-path属性的支持度都还不是很好。

文章目录

1. 基于tranform的实现方法

2. 基于裁切路径 clip-path 方法