css3 小箭头-HTML中用div+CSS实现简单箭头图标

在网页设计中，我们经常会使用一些箭头作为装饰来装饰我们的网页。 虽然现在很多网站设计者喜欢使用字体图标来达到箭头的疗效，但这也会对网页的加载造成一些影响。 今天飞鸟木鱼小编就来给大家讲讲如何利用div加CSS来实现网页设计中一些箭头的疗效。

DIV+CSS实现实心小箭头的效果

在一些网页的二级导航菜单，或者带有下拉功能的列表等中，都会有一些实现的小箭头来表示一个DIV内容丰富，那么我们如何实现这种小箭头样式呢？

首先是 CSS 代码

<pre class="prism-highlight prism-language-css">/*箭头向上*/
.to_top {
    width: 0;
    height: 0;
    border-bottom: 10px solid #ccc;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
/*箭头向下*/
.to_bottom {
    width: 0;
    height: 0;
    border-top: 10px solid #ccc;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
/*箭头向左*/
.to_left {
    width: 0;
    height: 0;
    border-right: 10px solid #ccc;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}
/*箭头向右*/
    .to_right {
    width: 0;
    height: 0;
    border-left: 10px solid #cccf;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
}

HTML代码

向上箭头

向左箭头

向右箭头

向下箭头

代码运行结果

如果你觉得箭头太大或太小css3 小箭头css3 小箭头，而且颜色不是你想要的，我们可以通过调整DIV边框的粗细和颜色来调整箭头的大小

DIV+CSS实现大箭头的疗效

昨天更改三栏主题时，有用户反映要添加一个大的左右箭头。虽然实现很简单（可以用背景图来代替），但是需要添加一个功能可以自定义背景的颜色，所以就想到了用DIV+CSS来绘制箭头，这样就可以方便的自定义箭头的颜色。

CSS代码

.text{
    display: inline-block;
    border-top: 2px solid;
    border-right: 2px solid;
    width: 100px;
    height: 100px;
    border-color: #EA6000;
    transform: rotate(-135deg);
    margin: 50px auto auto 100px;
}

HTML代码

代码运行结果

我们可以通过改变C下面的代码来改变箭头形式的箭头数量，也可以改变宽度（width）和高度（height）来改变箭头的大小。

transform: rotate(-135deg);/*调整旋转的角度*/

好了，文章就这些了，以上就是如何使用DIV+CSS实现箭头样式的代码