css三角形上下箭头点击

CSS三角形上下箭头点击是网页设计中常用的交互功能。在实现这个功能时，需要结合HTML、CSS和JavaScript技术。

首先，在HTML中创建两个箭头图标的容器。例如：

<div class="arrow-container"></div>
<div class="arrow-container"></div> 

然后，在CSS中设置箭头图标的样式，可以使用伪元素:before或:after来创建三角形，并设置其旋转、颜色等属性。例如：

.arrow-container {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.arrow-container:before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #000;
  transform: translate(-50%, -50%) rotate(-135deg);
}

.arrow-container:after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-bottom-color: #000;
  transform: translate(-50%, -50%) rotate(-135deg);
} 

最后，在JavaScript中添加点击事件，并为箭头容器添加CSS类名来实现箭头的旋转。例如：

const arrowContainers = document.querySelectorAll(".arrow-container");
arrowContainers.forEach(container => {
  container.addEventListener("click", () => {
    container.classList.toggle("rotate");
  });
}); 

通过以上步骤，就可以实现CSS三角形上下箭头点击的功能了。