css制作返回箭头
使用伪元素创建箭头
通过 ::before 或 ::after 伪元素结合边框属性绘制箭头。示例代码：
.arrow {
position: relative;
width: 40px;
height: 40px;
}
.arrow::before {
content: "";
position: absolute;
width: 20px;
height: 20px;
border-left: 3px solid #000;
border-bottom: 3px solid #000;
transform: rotate(45deg);
left: 10px;
top: 8px;
}使用旋转矩形实现
通过旋转一个矩形元素形成箭头效果：
.arrow-box {
width: 24px;
height: 24px;
position: relative;
}
.arrow-line {
position: absolute;
width: 18px;
height: 3px;
background: #333;
top: 50%;
}
.arrow-line:first-child {
transform: rotate(45deg) translateY(-6px);
}
.arrow-line:last-child {
transform: rotate(-45deg) translateY(6px);
}SVG 内联实现
直接在HTML中嵌入SVG代码：
<svg class="arrow-icon" viewBox="0 0 24 24" width="24" height="24">
<path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/>
</svg>配套CSS：
.arrow-icon {
fill: currentColor;
transform: rotate(180deg); /* 调整方向 */
}Unicode 字符方案
使用特殊字符配合CSS旋转：
<span class="unicode-arrow">➜</span>.unicode-arrow {
display: inline-block;
font-size: 24px;
transform: scaleX(-1); /* 水平翻转 */
color: #555;
}动画效果增强
为箭头添加悬停动画：
.animated-arrow {
transition: transform 0.3s;
}
.animated-arrow:hover {
transform: translateX(-5px) rotate(180deg);
}所有方案均可通过调整 color、border-width、transform 等属性改变箭头样式和方向。建议优先选择SVG方案，因其具有更好的缩放清晰度和样式控制灵活性。
