CSS3中有一個很酷炫的效果，可以讓圖片的對角線收縮，看起來非常的有設計感。下面就來介紹一下CSS3的這個特性。

首先呢，我們需要用到CSS3的線性漸變，用它來創建圖片的對角線。這樣做不僅可以制造動態的斜線，而且能夠使現有的斜線比較平滑。

.img {
width: 300px;
height: 300px;
background: linear-gradient(to bottom right, transparent 50%, #000 50%),
linear-gradient(to top left, transparent 50%, #000 50%);
}

上面這個代碼塊中，我們用了到了兩個線性漸變，一個從左上角到右下角，一個從右下角到左上角。這就創造出了一個四方形區域，其中有一個交叉的對角線。

接著，我們再使用transform對這個圖片進行傾斜，把它變成一個菱形。

.img {
transform: skew(-45deg);
}

最后一步就是，將我們創造的菱形區域放入一個DIV容器中，然后設置overflow:hidden屬性，就可以實現對角線收縮的效果了。

.container {
width: 300px;
height: 300px;
overflow: hidden;
}

好啦，一個圖片對角線收縮的效果就被我們實現啦，看起來是不是超級有設計感呢？