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 方案支持复杂样式，伪元素方案灵活性最高。