css伪元素画一个菱型

CSS伪元素可以用来在元素的内容之前或之后插入额外的内容，并且可以通过设置其样式来实现各种效果。要画一个菱形，可以使用CSS伪元素的`::before`和`::after`来创建两个三角形，并通过旋转和定位来组合成菱形。

下面是一个使用CSS伪元素画一个菱形的示例：

.diamond {
  position: relative;
  width: 100px;
  height: 100px;
}

.diamond::before,
.diamond::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border: 50px solid transparent;
}

.diamond::before {
  border-bottom-color: red;
  border-top: none;
  transform: rotate(45deg);
}

.diamond::after {
  border-top-color: red;
  border-bottom: none;
  transform: rotate(-45deg);
}

在上面的示例中，我们创建了一个名为`.diamond`的元素，并使用`::before`和`::after`伪元素来创建两个三角形。通过设置`border`属性的宽度和颜色，我们可以控制三角形的形状和颜色。通过设置`transform`属性的`rotate`值，我们可以旋转三角形。最后，通过设置`position`属性和`top`、`left`属性来定位三角形。

你可以将上面的CSS代码应用到一个HTML元素上，例如一个`<div>`元素，并为该元素添加`.diamond`类名，就可以看到一个菱形的效果。