《CSS揭秘》：菱形图片

菱形图片

在网页设计中，把图片裁切成菱形主要有两种方法。一种是基于元素嵌套方案，另外一种是裁切路径方案

元素嵌套方案 在线编辑

将图片用一个<div>包裹起来，对这个<div>变形，然后对图片应用相反的变形。

.picture{
    width: 250px;
    height: 250px;
    transform: rotate(45deg);
    overflow: hidden;
}
.picture > img{
    max-width: 100%;
    transform: rotate(-45deg) scale(1.42);//图片需要扩大1.42倍去填满整个菱形区域
}

裁切路径 在线编辑

使用元素嵌套方案虽然可以实现目的，但是兼容性并不好，如果图片不是正方形，结果就会严重变形。另一种方法是使用裁切路径属性clip-path。
clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);