css点击箭头改方向

CSS中可以使用伪元素选择器来实现点击箭头改变方向的效果。下面是一段示例代码：

.arrow {
  width: 20px;
  height: 20px;
  border: solid black;
  border-width: 0 2px 2px 0;
  display: inline-block;
  transform: rotate(45deg);
  cursor: pointer;
}
.arrow.active {
  transform: rotate(225deg);
}
 

这段代码定义了一个箭头样式，点击时会将箭头旋转90度。通过添加一个名为“active”的class来实现箭头点击后的旋转效果。

使用方法：

<div class="arrow" onclick="this.classList.toggle('active')"></div> 

将这个箭头样式添加到HTML的元素中，点击时箭头的方向就会改变。