如何用CSS实现四个方向的箭头效果

在网页开发里，方向箭头是常用的交互元素，纯CSS实现箭头不仅轻量，还能随时调整样式，不需要依赖外部图标资源。接下来就介绍两种常见的CSS实现四个方向箭头的方法。

方法一：基于边框绘制箭头

这种方法的原理是利用元素的边框叠加，当元素宽高为0时，四个方向的边框会呈现三角形，通过隐藏不需要的边框就能得到对应方向的箭头。

基础箭头样式定义

先定义一个通用的箭头基础类，设置宽高为0，边框样式为实线，再根据方向调整边框的显示和颜色。

/* 基础箭头样式，宽高设为0，边框透明 */
.arrow {
    width: 0;
    height: 0;
    border-style: solid;
}
/* 向上箭头：下边框有颜色，其余透明 */
.arrow-up {
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent #333 transparent;
}
/* 向下箭头：上边框有颜色，其余透明 */
.arrow-down {
    border-width: 10px 10px 0 10px;
    border-color: #333 transparent transparent transparent;
}
/* 向左箭头：右边框有颜色，其余透明 */
.arrow-left {
    border-width: 10px 10px 10px 0;
    border-color: transparent #333 transparent transparent;
}
/* 向右箭头：左边框有颜色，其余透明 */
.arrow-right {
    border-width: 10px 0 10px 10px;
    border-color: transparent transparent transparent #333;
}

使用方式

直接在HTML元素上添加对应的类即可展示箭头，需要调整大小时修改border-width的数值，调整颜色修改border-color里的对应颜色值。

<div class="arrow arrow-up"></div>
<div class="arrow arrow-down"></div>
<div class="arrow arrow-left"></div>
<div class="arrow arrow-right"></div>

方法二：基于伪元素和transform旋转

这种方法先绘制一个带边框的方块，只保留两条边，再通过旋转得到不同方向的箭头，箭头的粗细可以通过边框宽度调整。

通用箭头样式

先定义一个基础箭头类，利用伪元素绘制箭头主体，再通过不同的旋转角度实现四个方向。

/* 基础箭头容器，设置相对定位 */
.arrow-rotate {
    position: relative;
    width: 12px;
    height: 12px;
}
/* 伪元素绘制箭头主体，只保留下和右边框 */
.arrow-rotate::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-right: 2px solid #666;
    border-bottom: 2px solid #666;
}
/* 向上箭头：旋转-135度 */
.arrow-rotate-up::after {
    transform: rotate(-135deg);
}
/* 向下箭头：旋转45度 */
.arrow-rotate-down::after {
    transform: rotate(45deg);
}
/* 向左箭头：旋转135度 */
.arrow-rotate-left::after {
    transform: rotate(135deg);
}
/* 向右箭头：旋转-45度 */
.arrow-rotate-right::after {
    transform: rotate(-45deg);
}

使用方式

同样在HTML元素上添加对应类即可，调整箭头大小可以修改容器的width和height，调整粗细修改伪元素的边框宽度，颜色修改边框颜色。

<div class="arrow-rotate arrow-rotate-up"></div>
<div class="arrow-rotate arrow-rotate-down"></div>
<div class="arrow-rotate arrow-rotate-left"></div>
<div class="arrow-rotate arrow-rotate-right"></div>

两种方法的对比

两种方法各有适用场景，我们可以通过下面的表格快速了解差异：

实际开发中可以根据页面的设计风格选择合适的方法，两种实现都不需要额外引入资源，性能也更好。

CSS箭头样式伪元素transform方向箭头修改时间：2026-06-07 02:48:58