css3制作箭头

使用CSS3制作箭头的方法

边框法制作三角形箭头

通过设置元素的宽高为0，利用边框的透明属性生成三角形箭头：

.arrow {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #000; /* 向下箭头 */
}

调整边框方向可改变箭头指向：

• 上箭头：border-bottom改为border-top
• 左箭头：border-right改为border-left并设置其他边框透明
• 右箭头：border-left改为border-right并设置其他边框透明

旋转矩形制作斜向箭头

使用伪元素结合transform旋转：

.arrow-diagonal {
  position: relative;
  width: 20px;
  height: 20px;
}
.arrow-diagonal::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  border-top: 2px solid #000;
  border-right: 2px solid #000;
  transform: rotate(45deg); /* 调整角度改变方向 */
}

SVG内联箭头

直接使用SVG代码嵌入HTML：

<svg viewBox="0 0 20 20" width="20" height="20">
  <path d="M0 10 L20 0 L20 20 Z" fill="#000"/>
</svg>

通过修改path的d属性值可以创建不同方向的箭头。

Unicode字符箭头

使用特殊字符快速实现：

.arrow-symbol {
  font-size: 24px;
}
/* HTML中使用 → ← ↑ ↓ 等符号 */

动画箭头

为箭头添加hover效果：

.arrow-animate {
  transition: transform 0.3s;
}
.arrow-animate:hover {
  transform: translateX(5px); /* 向右移动动画 */
}