css三角箭头怎么做

CSS三角箭头是一个很常用的效果，可以用来指示方向、做下拉菜单的指示箭头等等。那么该怎么做呢？

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

上面的代码是实现一个向上的三角箭头，主要的关键在于设置border的属性。其中，left和right设置为透明是因为这个箭头只需要一个三角形。

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

同理，上面的代码是实现了一个向下的三角箭头，只需要将border-top设置为5px即可。

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

这段代码是实现了一个向左的三角箭头。边框的设置也是类似的，只需要设置三个边框即可。

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

同理，上面的代码实现了向右的三角箭头，也是设置三个边框。

以上就是CSS实现三角箭头的方法，通过设置边框的颜色和宽度，即可轻松实现各种方向的三角箭头。需要注意的是，处理这个效果的容器需要有一定的背景，否则这个三角箭头是看不到的。