怎么运用CSS画一个三角形

在CSS中，你可以利用伪元素`:before`和`:after`以及边框（border）来创建三角形形状。这里有一种常见的方法叫做"伪元素三角法"。以下是基本步骤：

1. 创建一个div或者其他容器作为基础元素，给它设置宽度和高度（通常是0），然后定位为绝对或者相对定位。
2. 在这个基础元素上使用两个伪元素`:before`和`:after`。`:before`用于前三角，`:after`用于后三角。
3. 给这两个伪元素设置宽度、边距和边框，通常宽度设置为零，边距设置为三角形的实际大小，边框颜色透明，并且有一个自定义的颜色（如红色）来形成可见的三角形。

下面是一个简单的例子：

.triangle {
  position: relative;
  width: 0;
  height: 0;
}

.triangle:before,
.triangle:after {
  content: '';
  position: absolute;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
}

.triangle:before {
  top: 50%;
  margin-top: -25px; /* 边框宽度的一半 */
  border-bottom: 50px solid red; /* 颜色 */
}

.triangle:after {
  bottom: 100%;
  margin-bottom: -25px;
  border-top: 50px solid red;
}