css 三角形箭头

/* 使用 CSS 创建一个向下的三角形箭头 */
.arrow-down {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid black;
}

/* 使用 CSS 创建一个向上的三角形箭头 */
.arrow-up {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
}

/* 使用 CSS 创建一个向左的三角形箭头 */
.arrow-left {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid black;
}

/* 使用 CSS 创建一个向右的三角形箭头 */
.arrow-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid black;
}

解释说明：

• 宽度和高度为0：通过将元素的宽度和高度设置为0，我们创建了一个没有内容的容器。
• 边框技巧：通过设置不同方向的边框宽度和颜色，我们可以利用边框之间的透明区域形成三角形的效果。
• 不同方向的箭头：通过调整不同方向的边框属性（如 border-top、border-bottom、border-left 和 border-right），可以控制箭头的方向。