当前位置：首页 > CSS

css制作长箭头

2026-04-02 05:26:18CSS

CSS制作长箭头的方法

使用CSS可以灵活地创建长箭头，以下是几种常见的方法：

使用边框和旋转

通过设置元素的边框属性，结合旋转实现箭头效果：

.arrow {
  width: 100px;
  height: 2px;
  background-color: #000;
  position: relative;
}
.arrow::after {
  content: '';
  position: absolute;
  right: 0;
  top: -4px;
  width: 10px;
  height: 10px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(-45deg);
}

使用伪元素和线性渐变

通过伪元素和线性渐变创建更复杂的箭头：

.arrow-gradient {
  position: relative;
  height: 30px;
  width: 200px;
  background: linear-gradient(to right, #000, #000) no-repeat;
  background-size: 80% 2px;
  background-position: center;
}
.arrow-gradient::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: translateY(-50%) rotate(-45deg);
}

使用SVG内联

CSS结合内联SVG可以创建更精确的箭头：

.arrow-svg {
  width: 200px;
  height: 20px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20'><path d='M0,10 L180,10 L170,0 M180,10 L170,20' fill='none' stroke='black'/></svg>") no-repeat;
}

使用clip-path

通过clip-path属性裁剪出箭头形状：

css制作长箭头

.arrow-clip {
  width: 200px;
  height: 20px;
  background-color: #000;
  clip-path: polygon(0 45%, 90% 45%, 90% 0, 100% 50%, 90% 100%, 90% 55%, 0 55%);
}

每种方法都有其适用场景，边框方法适合简单箭头，SVG适合复杂形状，clip-path适合需要透明背景的情况。可以根据具体需求选择最合适的实现方式。