css 画一个三角形

要使用CSS创建一个简单的三角形，你可以利用伪元素`:before`和`:after`以及边框(`border`)属性。下面是一个例子，演示如何通过设置宽度、高度为0，上下左右四个方向的边框宽度分别为不同值来创建一个上指的三角形：

.triangle {
  position: relative;
  display: inline-block;
  width: 0;
  height: 0; /* 创建一个正方形 */
}

.triangle:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(45deg); /* 旋转45度形成斜角 */
  border-width: 0 0 60px 60px; /* 上下两个边框为0，左右边框为60px */
  border-style: solid; /* 边框样式 */
  border-color: transparent transparent #000 transparent; /* 可以调整颜色 */
}

/* 如果你想让三角形朝下，只需改变旋转角度到-45度 */
.triangle:after {
  content: "";
  position: absolute;
  bottom: 50%;
  left: 50%;
  transform: translate(-50%, 50%) rotate(-45deg);
  border-width: 0 0 60px 60px;
  border-style: solid;
  border-color: transparent transparent #000 transparent;
}