css下小三角

CSS下小三角是在网页设计中常见的效果，一般用于导航栏、下拉菜单等区域的图标。

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

上面的代码是一个CSS下小三角的示例，通过设置border属性可以实现。其中，border-left和border-right设置为相同的长度，border-bottom设置为需要的长度和颜色，border-top可以省略。

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

如果需要一个朝下的小三角，只需要将border-top设置为需要的长度和颜色即可。

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

同理，如果需要一个朝左的小三角，只需要将border-right设置为需要的长度和颜色即可。

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

如果需要一个朝右的小三角，只需要将border-left设置为需要的长度和颜色即可。

以上就是常用的四种CSS下小三角的实现方法，可以根据需要进行设置，实现自己想要的效果。