CSS画一个三角形简单方式

在CSS中，可以使用伪元素`:before`和`:after`配合边框（border）属性来创建简单的三角形。这里是一个基础的箭头形状的例子：

.triangle {
  position: relative;
  display: inline-block;
}

.triangle::before,
.triangle::after {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
}

.triangle::before {
  border-left: 50px solid transparent; /* 或者设置为实际宽度 */
  border-right: 50px solid transparent; /* 或者设置为实际宽度 */
  bottom: 100%; /* 箭头底部的位置 */
  margin-bottom: -50px; /* 防止内容显示 */
}

.triangle::after {
  border-top: 50px solid #your-color; /* 设置颜色 */
  left: 50%;
  margin-left: -25px; /* 计算出对齐的值 */
}

在这个例子中，`.triangle::before`创建了一个底边朝下的三角形，`.triangle::after`创建了另一个顶点在上部的三角形，两个三角形组合起来形成了箭头效果。