介绍 CSS Arrow 箭头

CSS Arrow箭头顾名思义实现的是创建不同方向和形状的箭头。箭头可以用于指向一个方向或位置，增强用户体验和视觉层次结构。在页面设计中，Arrow箭头可以被用于各种用途，例如指示提示框、菜单指示以及其他UI元素。

创建箭头的方法

创建箭头的方法可以有很多种。下面是三种主流方式：

使用伪元素创建箭头

.arrow {
  position: relative;
}

.arrow:after {
  content: "";
  display: block;
  position: absolute;
  right: -10px;
  top: 50%;
  width: 0;
  height: 0;
  margin-top: -5px;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 5px solid #999;
}

解释：

1. 创建一个 relative 定位的父元素，命名为 .arrow。伪元素需要 position 是 absolute，才能相对其父元素作为参考，所以有了这一步，伪元素可以在父元素内准确定位。

2. 在 .arrow 中创建 after 伪元素，并设置相应的 CSS 样式。

3. right: -10px; 使箭头紧靠在目标元素边框的右侧；top: 50%; 将箭头定位在目标元素的中间位置；border-top: 5px solid transparent; 和 border-bottom: 5px solid transparent; 用于创建箭头的尖端；指定箭头的左侧边框的三个声明（border-left: 5px solid #999;）来指定箭头的宽度、颜色和线条样式。

利用字体图标来制作箭头

利用字体图标可以非常方便的创建箭头样式。使用字体图标时，可以直接到网站上选择或下载相应的字体文件和 CSS 样式。常用的字体图标库有 Font Awesome、Glyphicons 等。

<i class="fas fa-arrow-right"></i>

需要引入以下 CSS 样式文件：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

解释：

1. 在 HTML 中使用字体图标元素，并在 class 属性中引用相应的 CSS 类名。

2. 引入字体图标库的 CSS 样式文件。

使用 SVG 矢量图形

SVG 是一种向量图形格式，可以用于创建精确的图形和图像。使用 SVG 可以方便地创建任意形状的箭头，并且可以通过 CSS 来控制其样式。

<svg width="20" height="20">
  <polyline points="2,10 7,15 18,4" style="fill:none;stroke:#333;stroke-width:2" />
</svg>

解释：

1. 使用 SVG 标签创建矢量图形，并指定其宽度和高度。

2. 在 polyline 标签中定义三个点的坐标，连成三角形，最后以 backslash(/) 结尾，完成声明。

3. 在 style 标签中定义箭头的样式，包括颜色、宽度、填充等。

如何使用箭头

箭头的使用非常灵活，可以根据需要灵活运用。下面列举一些常见的应用场景：

箭头指示提示框

箭头可以用于指向提示框的目标。通常将箭头放置在提示框的上方或下方，指向目标链接或按钮等。

<button class="btn">这里有一个提示框 <span class="arrow-box"><span class="arrow"></span></span></button>

.btn {
  position: relative;
  padding: 10px 20px;
  background-color: #1e90ff;
  color: #fff;
  border: none;
  border-radius: 5px;
}

.arrow-box {
  position: relative;
}

.arrow-box .arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  left: 50%;
  top: -8px;
  border: 4px solid transparent;
  border-bottom-color: #1e90ff;
  margin-left: -4px;
}

解释：

1. 创建一个按钮，命名为 .btn。

2. 在按钮中创建一个容器，命名为 .arrow-box，用于包含箭头元素。

3. 在 .arrow-box 中创建箭头元素，命名为 .arrow。用于指向提示框或目标链接。

箭头菜单指示

箭头可以指向下拉菜单或弹出框，增强用户体验和视觉效果。

<div class="menu">
  <a href="#">首页</a>
  <a href="#">文章</a>
  <a href="#">联系我们</a>
  <span class="arrow-box"><span class="arrow"></span></span>
</div>

.menu {
  position: relative;
}

.menu a {
  display: inline-block;
  padding: 10px 20px;
  background-color: #1e90ff;
  color: #fff;
  border: none;
  border-radius: 5px;
  margin-right: 5px;
}

.arrow-box {
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -8px;
}

.arrow-box .arrow {
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid transparent;
  border-top-color: #1e90ff;
  margin-top: -8px;
  left: 50%;
}

解释：

1. 创建一个菜单容器，命名为 .menu。

2. 在 .menu 中创建菜单链接。

3. 在 .menu 中创建一个容器，命名为 .arrow-box，用于包含箭头元素。

4. 在 .arrow-box 中创建箭头元素，命名为 .arrow。用于指向菜单或弹出框。

其他应用场景

除了上述应用场景，箭头还可以用于下拉列表、提示框、轮播图、分页导航等，让 UI 元素更加美观，提供更好的用户体验。

总结

箭头是现代 UI 设计中不可或缺的元素之一，可以通过三种不同的方式来创建。CSS Arrow 箭头可以用于指向某个方向或位置，增强用户体验和视觉层次结构。在设计中，灵活地使用箭头，可以满足各种需要，使页面更加丰富多彩。