将DIV 用CSS展现出一个菱形

要使用CSS创建一个菱形形状，可以利用伪元素`::before`和`::after`以及一些自定义的边框样式来实现。下面是一个简单的例子，展示如何在一个`div`元素上创建一个向上指的菱形：

HTML:

<div class="diamond"></div>

CSS:

.diamond {
  position: relative;
  width: 0;
  height: 0;
  border-left: 50px solid transparent; /* 上方三角形宽度 */
  border-right: 50px solid transparent; /* 下方三角形宽度 */
  border-bottom: 100px solid #000; /* 菱形底部厚度，颜色可根据需要调整 */
}

/* 创建伪元素并定位 */
.diamond::before,
.diamond::after {
  content: "";
  position: absolute;
}

/* 生成上方三角形 */
.diamond::before {
  top: -50px; /* 上方三角形顶部距离 */
  left: 50%; /* 对齐到父元素中心 */
  transform: translateX(-50%); /* 将三角形左移至自身中心 */
  border-top: 100px solid #000; /* 上方三角形高度和底色 */
}

/* 生成下方三角形 */
.diamond::after {
  bottom: -50px; /* 下方三角形底部距离 */
  left: 50%;
  transform: translateX(-50%);
  border-top: 50px solid #000; /* 下方三角形高度，底色同上 */
}