CSS3基础CSS制作多种样式的箭头图标(单个div标签)

CSS制作多种样式的箭头图标(单个div标签)

曾在《CSS制作上下左右箭头》这篇文章里分享了通过三角形和小矩形拼接实现简单小箭头的方法,制作的箭头图案大致是这样:

CSS箭头图标.png

生活中常见的箭头形状还有很多种,比如下图所示的这些,与刚才的箭头图案有所不同,本文主要分享这几种箭头图案的做法。

CSS箭头图案大全.png

为了方便描述,这里先把这四个箭头形状的html部分代码写出来,每个形状尽可能只用一个div标签:

<div class="ar" id="arrow1"></div>
<div class="ar" id="arrow2"></div>
<div class="ar" id="arrow3"></div>
<div class="ar" id="arrow4"></div>

箭头1的图案上半部分并不是一个简单的三角形,而像一个直角尖括号的形状,所以实现的方法很容易,一个正方形,如果只给相邻的两条边加上边框,就是一个直角图案了,所以:

#arrow1 {
 position:relative;
 width:14px;height:14px;
 border-top:10px solid #09c;
 border-right:10px solid #09c;
}

这样就轻松的做好了一个直角尖括号的形状,只需旋转-45度角就可以让它“指向”上方了:

transform:rotate(-45deg);

CSS箭头形状1.png

这样的尖括号形状指向性已经很明确了,在网页设计中也经常用到,比如在《返回网页顶部按钮》一文中就使用了这个图案。接下来如果要实现上面箭头1的形状,只需通过伪元素在下方增加一条竖线就行了:

#arrow1:after {
 content:" ";
 width:10px;height:24px;
 background-color:#09c;
 transform:rotate(45deg);
 position:absolute;left:0;right:0;top:0;bottom:0;
 margin:auto;
}

通过设置旋转和定位,让这条“竖线”刚好显示在中心的位置即可:

CSS箭头形状1-1.png


箭头2和箭头1差不多,在下方复制一个一样的尖括号形状即可,该形状可能不应该算是箭头,不过也很常见,指示性和装饰性也都不错:

#arrow2,#arrow2:after {
 width:14px;height:14px;
 border-top:5px solid #09c;
 border-right:5px solid #09c;
 transform:rotate(-45deg);
 position:relative;
}
#arrow2:after {
 content:" ";
 transform:rotate(0);
 position:absolute;left:-10px;top:5px;
}

CSS箭头形状2.png


箭头3这个形状常用来指示地理位置,与手机上的GPS位置图标类似,较简单的方法,就是在一个大三角形上面覆盖一个小三角形:

#arrow3 {
 width:0;height:0;
 border-bottom:30px solid #09c;
 border-left:15px solid transparent;
 border-right:15px solid transparent;
 position:relative;
}
#arrow3:after {
 content:" "; /*--添加一个小三角形--*/
 width:0;height:0;
 border-bottom:10px solid #ae9;
 border-left:15px solid transparent;
 border-right:15px solid transparent;
 position:absolute;bottom:-30px;left:-15px;
}

为了便于观察,这里将小三角形的颜色设置为绿色,得到的效果如下图,如果把小三角形的颜色设置为和页面背景相同,就可以得到箭头3的效果。

CSS箭头形状3-1.png


箭头4的形状很常见,但它上半部分和箭头1有所区别,也不是三角形,像是由两个平行四边形的图案组合而成的:

CSS箭头形状4-1.png

这里的思路是,先实现中间红色部分的“矩形”,再通过伪元素添加这两个“平行四边形”的图案:

#arrow4 {
 width:10px;height:10px;
 background-color:#d77;
 position:relative;
}

将矩形变形为平行四边形只需使用倾斜函数(skew)即可,所以这里通过两个伪元素将刚才的红色矩形复制两份并分别倾斜40度和-40度:

#arrow4:after {
 content:" ";
 position:absolute;
 left:0;right:0;top:50%;bottom:-50%;
 background-color:#09c;
 transform:skewX(40deg);
}
#arrow4:before {
 content:" ";
 position:absolute;
 left:0;right:0;top:-50%;bottom:50%;
 background-color:#5c9;
 transform:skewX(-40deg);
}

这样便得到下图这样一个与目标很接近的形状,设置不同的颜色是为了便于观察:

CSS箭头形状4-2.png

通过右边框将红色矩形“延长”到合适的尺寸,并将这几部分的颜色改为相同:

CSS箭头形状4-3.png

箭头4的形状便完成了,这里方向是向左的,通过旋转函数就可轻松实现各个方向的箭头指向了。
以上全部箭头demo请点这里

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/css3/161.html