css上下箭头1减1

CSS中的上下箭头经常用于表示列表的排序方式，比如通过点击上箭头可以将列表按照某个字段升序排列，点击下箭头则可以将列表按照某个字段降序排列。本文将介绍如何使用CSS实现一个简单的上下箭头方案。

.arrow {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  cursor: pointer;
}

.arrow.up {
  border-bottom: 7px solid black;
}

.arrow.down {
  border-top: 7px solid black;
}

.arrow.up.active {
  border-bottom: 7px solid #3498db;
}

.arrow.down.active {
  border-top: 7px solid #3498db;
} 

上面的代码定义了一个名为“arrow”的CSS类，这个类用于表示一个上下箭头，通过给这个类添加不同的修饰类，可以实现上箭头、下箭头、以及激活状态的箭头的样式。

为了在HTML文档中使用这个箭头，只需要在需要的地方添加一个具有“arrow”类的元素，并添加相应的修饰类即可：

<div class="arrow up"></div>
<div class="arrow down active"></div> 

上面的代码生成了一个向上的箭头和一个向下的箭头，其中向下的箭头是处于激活状态的，表示当前列表是按照降序排列的。

总之，这个上下箭头方案非常简单，通过仅仅添加一个CSS类和一些修饰类，就可以很容易地实现上下箭头的效果。