css 菱形

/* 使用 CSS 创建一个菱形 */
.diamond {
  width: 0;
  height: 0;
  border: 50px solid transparent; /* 设置边框宽度和透明颜色 */
  border-bottom: 70px solid red; /* 设置底部边框为红色，形成菱形的下半部分 */
  position: relative;
  top: -50px; /* 调整位置，使菱形居中 */
}

.diamond:after {
  content: "";
  position: absolute;
  left: -50px;
  top: 70px;
  width: 0;
  height: 0;
  border: 50px solid transparent; /* 设置边框宽度和透明颜色 */
  border-top: 70px solid red; /* 设置顶部边框为红色，形成菱形的上半部分 */
}

解释说明：

1. .diamond 类：通过设置 border 属性来创建一个三角形（菱形的下半部分），并通过 position: relative 和 top: -50px 来调整其位置。
2. :after 伪元素：使用 :after 伪元素创建另一个三角形（菱形的上半部分），并通过 position: absolute 将其放置在 .diamond 元素的上方。
3. 边框颜色：border-bottom 和 border-top 分别设置了上下两个三角形的颜色，形成了一个完整的菱形。

你可以将这段代码应用到你的 HTML 文件中，并通过调整边框的宽度和颜色来自定义菱形的大小和样式。