利用css实现上下左右箭头的方法

在前端web开发中，CSS样式代码可以做很多的事情。比如画一些简单的图形等等。下面73so博客给大家说一说利用css样式表来画箭头的方法，可以画左箭头，右箭头，上箭头以及下箭头等。

css画箭头的方法

下面是一个完整的利用CSS画箭头的示例，包括左箭头，右箭头等等。

<style>
i {
    border: 1px solid #000;
    border-width: 0px 1px 1px 0px;
    display: inline-block;
    padding: 4px;
}
.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);
}
</style>
<h2>73so.com</h2>
<p>右箭头：<i class="right"></i></p>
<p>左箭头：<i class="left"></i></p>
<p>上箭头：<i class="up"></i></p>
<p>下箭头：<i class="down"></i></p>

说明：

1、箭头的是利用DIV边框来显现的

2、不同方向的箭头可以使用CSS样式代码中的 transform 属性来旋转

3、以上代码可以保存到本地运行即可。