css制作向左箭头
使用 CSS 制作向左箭头
方法一：使用边框实现三角形箭头
通过设置元素的边框宽度和颜色，利用透明边框特性生成箭头形状。
.arrow-left {
width: 0;
height: 0;
border-top: 10px solid transparent;
border-right: 15px solid #333;
border-bottom: 10px solid transparent;
}调整 border-top 和 border-bottom 的宽度可改变箭头高度，border-right 的宽度控制箭头长度。
方法二：使用伪元素和旋转
通过旋转矩形元素生成箭头，适合需要更复杂样式的情况。
.arrow-left {
position: relative;
width: 40px;
height: 20px;
}
.arrow-left::before {
content: "";
position: absolute;
width: 15px;
height: 3px;
background: #333;
top: 50%;
left: 0;
transform: translateY(-50%);
}
.arrow-left::after {
content: "";
position: absolute;
width: 10px;
height: 10px;
border-left: 3px solid #333;
border-bottom: 3px solid #333;
transform: rotate(45deg);
left: 0;
top: 50%;
margin-top: -5px;
}方法三：使用 SVG 内联
通过 SVG 路径直接绘制箭头，适合需要高精度控制的情况。
.arrow-left {
width: 20px;
height: 20px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15.41 16.59L10.83 12l4.58-4.59L14 6l-6 6 6 6 1.41-1.41z' fill='%23333'/%3E%3C/svg%3E");
}方法四：使用 Unicode 字符
简单场景下可直接使用 Unicode 箭头字符。
.arrow-left::before {
content: "←";
font-size: 24px;
}样式调整建议
- 颜色修改：替换
#333为需要的颜色值 - 大小调整：修改尺寸数值时保持比例协调
- 动画效果：可添加
transition或transform实现悬停动画 - 响应式设计：配合
vw/vh单位实现自适应大小
每种方法适用于不同场景，边框方案适合轻量级使用，SVG 方案支持复杂样式，伪元素方案灵活性最高。
