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