纯CSS实现上下左右箭头

本文介绍如何用纯CSS实现上下左右箭头

HTML标记：

<p>Right arrow: <i class="right"></i></p>
<p>Left arrow: <i class="left"></i></p>
<p>Up arrow: <i class="up"></i></p>
<p>Down arrow: <i class="down"></i></p>

CSS代码：

i {
  border: solid black;
  border-width: 0 1px 1px 0;
  display: inline-block;
  padding: 3px;
}
.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}
.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}
.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}
.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

说明：

设置箭头粗细的代码是：

border-width: 0 1px 1px 0;

我们只需把1px改为其他数字如3px，就得到不同粗细的箭头。

另外，设置箭头颜色的代码是：

border: solid black;

 只需把black改为其他颜色，箭头就会变成其他颜色。

我们还可以设置箭头的大小，代码是：

padding: 3px;

把3px改为其他数字如5px，箭头就会变大。