使用css制作箭头

CSS制作箭头的方法

使用边框制作箭头
通过设置元素的边框宽度和颜色，利用透明边框形成箭头效果。例如制作向右的箭头：

.arrow-right {
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid #000;
}

使用伪元素和旋转
结合伪元素和transform: rotate()实现更灵活的箭头方向控制：

.arrow {
  position: relative;
  width: 20px;
  height: 20px;
}
.arrow::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(45deg);
}

使用SVG内联
直接在CSS中嵌入SVG路径，适合复杂箭头：

.arrow-svg {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M7 10l5 5 5-5z'/></svg>");
  width: 24px;
  height: 24px;
}

CSS clip-path
通过裁剪路径自定义箭头形状：

.arrow-clip {
  width: 20px;
  height: 20px;
  background-color: #000;
  clip-path: polygon(0% 20%, 60% 20%, 60% 0%, 100% 50%, 60% 100%, 60% 80%, 0% 80%);
}

动画箭头
添加过渡或动画效果增强交互性：

.arrow-animate {
  transition: transform 0.3s ease;
}
.arrow-animate:hover {
  transform: translateX(5px);
}