HTML中操作div+CSS实现简朴的箭头图标的代码

在网页计划中，我们常常得会用到一些箭头做为装饰来隐瞒我们的网页，固然此刻许多的网站的计划者们都喜好以引用字体图标的情势来实现箭头的结果，但那样也会给网页的加载造成一些影响。本日飞鸟慕鱼小编就给各人说一说，在网页计划中怎样操作div加CSS的方法来实现一些箭头的结果。

DIV+CSS实实际心小箭头的结果

在网页的一些二级导航菜单，或是带有下拉成果的列表等处，城市有一些实现的小箭头来暗示一个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实现大箭头的结果

昨天在修改三栏主题的时辰，有效户反馈说，要插手一个阁下大箭头。固然实现起来很简朴（可以行使配景图片取代），可是要加一个靠山可以自界说颜色的成果，以是就想到了操作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代码

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

代码运行功效

我们可以通过修改C以下的代码，举办箭头方法的改凑数，也可以修改，width（宽）与height(高)，来实现箭头巨细的改变。

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

总结

以上所述是小编给各人先容的HTML中操作div+CSS实现简朴的箭头图标的代码,但愿对各人有所辅佐，假如各人有任何疑问请给我留言，小编会实时回覆各人的。在此也很是感激各人对剧本之家网站的支持！假如你认为本文对你有辅佐，接待转载，烦请注明出处，感谢！

（编辑：湖南网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!