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); /* 向右移动动画 */
}
