CSS偽類可以用來實現各種有趣的效果，其中之一就是寫一個菱形。菱形由兩個等腰三角形組成，我們可以通過偽類和CSS3的旋轉變換來實現。

.diamond {
width: 50px; /* 菱形的寬度 */
height: 50px; /* 菱形的高度 */
background-color: #ccc; /* 菱形的顏色 */
transform: rotate(45deg); /* 旋轉45度 */
}
.diamond::before, .diamond::after {
content: ""; /* 偽元素的內容為空 */
position: absolute; /* 絕對定位 */
background-color: inherit; /* 繼承菱形的顏色 */
}
.diamond::before {
top: -25px; /* 相對于菱形頂部的位置 */
left: 0; /* 相對于菱形左側的位置 */
width: 50px; /* 三角形的寬度 */
height: 50px; /* 三角形的高度 */
transform: rotate(-45deg); /* 旋轉45度 */
}
.diamond::after {
bottom: -25px; /* 相對于菱形底部的位置 */
left: 0; /* 相對于菱形左側的位置 */
width: 50px; /* 三角形的寬度 */
height: 50px; /* 三角形的高度 */
transform: rotate(45deg); /* 旋轉45度 */
}

在上面的代碼中，我們定義了一個名為“diamond”的類，它用來表示一個菱形。通過設置寬度、高度、背景顏色和旋轉變換，我們將一個普通的矩形轉換成了一個菱形。

為了實現菱形的兩個三角形，我們使用了偽元素:before和:after。這兩個偽元素分別表示菱形的上半部分和下半部分，它們都繼承了菱形的背景顏色。通過設置它們的位置、寬度、高度和旋轉變換，我們將它們分別旋轉45度，并擺放在菱形的頂部和底部。

通過使用偽類和旋轉變換，我們可以很容易地實現一個華麗的菱形效果。如果你想在你的網頁中使用菱形，試試上面的代碼吧！