css箭头制作

CSS 箭头制作方法

使用边框属性创建三角形箭头

通过设置元素的 border 属性，可以创建简单的三角形箭头。将元素的宽度和高度设为 0，然后通过设置不同方向的边框颜色来形成箭头。

.arrow {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
}

调整箭头方向

通过修改边框的方向和颜色，可以实现不同方向的箭头。例如，向上箭头、向下箭头、向左箭头和向右箭头。

.arrow-up {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid black;
}

.arrow-down {
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid black;
}

.arrow-left {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-right: 10px solid black;
}

.arrow-right {
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 10px solid black;
}

使用伪元素创建箭头

通过 ::before 或 ::after 伪元素，可以在元素内部或外部添加箭头，增强视觉效果。

.tooltip {
  position: relative;
  background: #333;
  color: white;
  padding: 10px;
}

.tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}

使用 CSS 变换创建斜向箭头

通过 transform 属性旋转边框生成的箭头，可以实现斜向箭头效果。

.arrow-diagonal {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-bottom: 10px solid black;
  transform: rotate(45deg);
}

使用 SVG 创建复杂箭头

对于更复杂的箭头形状，可以使用内联 SVG，通过 path 元素定义箭头路径。

<svg width="20" height="20" viewBox="0 0 20 20">
  <path d="M0 10 L20 10 L10 0 Z" fill="black" />
</svg>

使用 Unicode 字符作为箭头

某些 Unicode 字符可以直接用作箭头符号，例如 → (U+2192)、← (U+2190)、↑ (U+2191)、↓ (U+2193)。

.arrow-unicode {
  font-size: 24px;
  content: "→";
}

使用 CSS 渐变创建箭头

通过 linear-gradient 可以创建带有渐变效果的箭头。

.arrow-gradient {
  width: 20px;
  height: 20px;
  background: linear-gradient(45deg, transparent 50%, black 50%);
}