通過css裁切圖片為菱形圖片

在web設計中，把圖片裁切成菱形圖片展示是一種常見的需求，通過photoshop直接將一張圖片裁剪成菱形是一種解決方案，但不是最佳解決方案，這裡筆者直接通過css設計了兩種方案，來實現讓圖片菱形展示。
以以下圖片為例：

我們想要這張圖片以菱形的效果展示，這裡是不能讓圖片直接通過rotate來旋轉實現的，直接讓圖片旋轉，那圖片的內容也就傾斜了。我們想要的效果圖是這樣的：

這裡介紹兩種方法。
第一種：

<div class="picture">    <img src="img/img.jpg"/></div>

.picture{    width: 100px;    transform:rotate(45deg);    overflow: hidden;}.picture>img{    max-width: 100%;    transform: rotate(-45deg) scale(1.42);}

這裡用到了兩個標籤，注意內層圖片反向旋轉之後要通過scale進行放大處理，否則會出現八邊形的樣子。
第二種：
這種方法更加直觀有效，而且效果表現更佳。
還是以上面標籤中的圖片為例，這裡只操作img標籤，也僅僅只需要這一個標籤就可以，通過對這個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%);}

滑鼠移至上方到圖片上時，圖片會平滑的擴充為完整的圖片，讀者可以親手嘗試一下。