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度，并摆放在菱形的顶部和底部。

通过使用伪类和旋转变换，我们可以很容易地实现一个华丽的菱形效果。如果你想在你的网页中使用菱形，试试上面的代码吧！