css三角箭头代码

在 CSS 中，三角形是一种常见的图形，经常用于指向特定的元素或方向。三角形的实现方式有很多种，其中一种较为常见的就是使用 CSS 伪元素和边框实现。

.arrow-up {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

.arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
}

.arrow-left {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-right: 5px solid black;
}

.arrow-right {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid black;
} 

以上代码分别实现了向上、向下、向左和向右的三角形箭头。其中，width 和 height 都设置为 0，因为三角形实际上没有实际的宽度和高度，它们是由边框构成的。通过设置边框的颜色和粗细，可以让三角形呈现出不同的颜色和大小。

除了上面的实现方式，还有其他的方法可以实现三角箭头，比如使用 SVG 图形或者 CSS3 的 transform 和旋转属性等。选择何种方式实现要根据实际情况而定，通常来说，边框的方式更加简单易用，而 SVG 图形和 transform 属性则可以实现更加丰富的效果。