hi,欢迎访问本站!
当前位置: 首页Web前端正文

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

墨初 Web前端 1382阅读

在前端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、以上代码可以保存到本地运行即可。

标签:
声明:无特别说明,转载请标明本文来源!
相关推荐