LOGO OA教程 ERP教程 模切知识交流 PMS教程 CRM教程 开发文档 其他文档  
 
网站管理员

[点晴永久免费OA]HTML中利用DIV+CSS实现简单的箭头图标代码

admin
2022年10月21日 10:5 本文热度 1506

/*箭头向上*/

.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代码代码运行结果:


如果你感觉箭头过大或太小,以及颜色不是你想要的,我们可以通过调整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);/*调整旋转的角度*/


该文章在 2022/10/21 10:05:14 编辑过
关键字查询
相关文章
正在查询...
点晴ERP是一款针对中小制造业的专业生产管理软件系统,系统成熟度和易用性得到了国内大量中小企业的青睐。
点晴PMS码头管理系统主要针对港口码头集装箱与散货日常运作、调度、堆场、车队、财务费用、相关报表等业务管理,结合码头的业务特点,围绕调度、堆场作业而开发的。集技术的先进性、管理的有效性于一体,是物流码头及其他港口类企业的高效ERP管理信息系统。
点晴WMS仓储管理系统提供了货物产品管理,销售管理,采购管理,仓储管理,仓库管理,保质期管理,货位管理,库位管理,生产管理,WMS管理系统,标签打印,条形码,二维码管理,批号管理软件。
点晴免费OA是一款软件和通用服务都免费,不限功能、不限时间、不限用户的免费OA协同办公管理系统。
Copyright 2010-2024 ClickSun All Rights Reserved