css三角形箭头怎么写

CSS三角形箭头是网页设计中经常使用的小技巧，它可以用于制作导航菜单等各种需要引导用户方向的元素。下面是几种实现CSS三角形箭头的方法：

/* 方式一 */
.triangle-up {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 5px solid black;
}

/* 方式二 */
.triangle-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid black;
}

/* 方式三 */
.triangle-left {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-right: 5px solid black;
  border-bottom: 5px solid transparent;
  border-left: none;
}

/* 方式四 */
.triangle-right {
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-left: 5px solid black;
  border-bottom: 5px solid transparent;
  border-right: none;
} 

以上代码中，.triangle-up 和 .triangle-down 分别表示向上和向下的箭头，.triangle-left 和 .triangle-right 分别表示向左和向右的箭头。其中，width 和 height 属性为0是因为我们只需要边框，而不需要填充内容。利用边框的颜色和宽度，我们就可以实现三角形的效果了。

需要注意的是，对于斜向的箭头，可以选择用 transform 属性来实现，例如：

/* 方式五 */
.triangle-up-right {
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-right: 20px solid #333;
  transform: rotate(45deg);
} 

以上代码中，我们使用 rotate(45deg) 旋转了箭头，使其能够斜向上方。

总之，实现CSS三角形箭头可以使用不同方法，在具体项目中需要根据实际需求选择合适的方式。