在網頁設計中，經常需要使用各種形狀的圖片來裝飾頁面，其中菱形圖片是一種比較常見的形狀。使用 CSS 的 div 標簽可以輕松地實現菱形圖片的效果。

.diamond {
width: 100px;
height: 100px;
transform: rotate(45deg);
background-color: #f2f2f2;
position: relative;
}
.diamond::before {
content: "";
position: absolute;
top: -50px;
left: 0;
width: 100px;
height: 100px;
background-color: #f2f2f2;
transform: rotate(-45deg);
}

以上代碼中，我們首先定義了一個類名為 diamond 的 div 標簽，它的寬度和高度均為 100px，背景色為 #f2f2f2，因為我們需要翻轉這個 div 標簽，所以需要設置絕對定位的屬性 position 為 relative。然后，在這個 div 標簽的前面添加一個偽元素 ::before，用于實現菱形圖片的效果。該偽元素的寬度和高度也為 100px，背景色也是 #f2f2f2，top 屬性設置為 -50px，left 屬性設置為 0，通過 transform:rotate(-45deg) 來把這個偽元素傾斜并旋轉 45 度，這樣就能實現菱形的效果了。

在實際應用中，我們可以根據實際的需要來調整寬度和高度，以及修改背景顏色和旋轉角度等屬性，從而實現不同風格和形狀的菱形圖片。