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