HTML中运用div+CSS完成简易的箭头标志的编码

在网页页面设计方案中，大家常常得会用到1些箭头作为装饰设计来装点大家的网页页面，尽管如今许多的网站的设计方案者们都喜爱以引入字体样式标志的方式来完成箭头的实际效果，但那样也会给网页页面的载入导致1些危害。今日飞鸟慕鱼网编就给大伙儿说1说，在网页页面设计方案中怎样运用div加CSS的方法来完成1些箭头的实际效果。

DIV+CSS完成实心小箭头的实际效果

在网页页面的1些2级导航栏菜单，或是带有往下拉作用的目录等处，都会有1些完成的小箭头来表明1个DIV有含有內容，那大家该怎样完成这些小箭头的款式呢？

先上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编码

<p>向上箭头</p>
<div class="to_top"></div>
<p>向左箭头</p>
<div class="to_left"></div>
<p>向右箭头</p>
<div class="to_right"></div>
<p>向下箭头</p>
<div class="to_bottom"></div>

 编码运作結果

假如你觉得箭头过大或很小，和色调并不是你要想的，大家能够根据调剂DIV的边框的粗细和色调来，来调剂箭头的尺寸 

DIV+CSS完成大箭头的实际效果

昨日在改动3栏主题的情况下，有效户意见反馈说，要添加1个上下大箭头。尽管完成起来很简易（可使用情况照片替代），可是要加1个后台管理能够自定色调的作用，因此就想起了运用DIV+CSS来画箭头，这样自身能够很便捷的给箭头自定色调啦

CSS编码

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

HTML编码

<span class="text"></span>

编码运作結果

大家能够根据改动C下列的编码，开展箭头方法的改滥竽充数，还可以改动，width（宽）与height(高)，来完成箭头尺寸的更改。

transform: rotate(⑴35deg);/*调剂转动的角度*/

总结

以上所述是网编给大伙儿详细介绍的HTML中运用div+CSS完成简易的箭头标志的编码,期待对大伙儿有一定的协助，假如大伙儿有任何疑惑请给我留言，网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用！假如你感觉本文对你有协助，欢迎转载，烦请注明出处，感谢！