css 箭头

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

/* 使用 CSS 创建一个向下的箭头 */
.arrow-down {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 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;
}

解释说明：

• 箭头的基本原理：通过设置元素的 width 和 height 为 0，并使用 border 属性来创建三角形。通过调整不同方向的边框颜色和透明度，可以控制箭头的方向。
• 箭头方向：
  • 向上箭头：border-bottom 设置为黑色，其他边框为透明。
  • 向下箭头：border-top 设置为黑色，其他边框为透明。
  • 向左箭头：border-right 设置为黑色，其他边框为透明。
  • 向右箭头：border-left 设置为黑色，其他边框为透明。

你可以根据需要调整箭头的大小和颜色。