关于向下,向上箭头的实现

箭头应用

箭头在网页中的应用非常之广泛,基本所有的网站都会有箭头,比如导航栏:your text

比如轮播图:

your text

比如制作向下滑动的指示:

your text

如何用字符实现箭头

最简单的方式当然是用图片,但是图片的话不具有通用性,做不同的箭头需要去ps不同的图,大小也不可控制。

其实还有更简单的方式就是用特殊的字符,比如这个特殊符号(可以用搜狗输入法打出来)这个符号是一个菱形,用字符有什么好处?不用请求图片,可以自定义大小,甚至可以修改样式(字体支持)

那这个菱形怎么变成箭头呢?很简单,想用哪一部分就把另一部分遮盖就好了。

your text

所以一个菱形可以实现上下左右四个箭头!那如何进行遮盖呢?很简单,用overflow:hidden就行了。

实现方案

一般来说是用2个标签包围,然后外面盒子负责箭头的定位,箭头大小,里面盒子负责偏移(显示哪个箭头),一般使用的是<i><s>这两个标签,因为比较简单。比较好看。

为了方便说明,下面的html代码均为:(默认css是全清除了样式的,即text-decoration:none,清除样式的css可以网上下)

<i><s></s></i>

由于箭头一般不会单独的存在,一般是用相对于父亲的绝对定位,所以下面的<i>的定位全使用的绝对定位。如果做一个网站,可能会用到多个箭头,可以把箭头封装成公共类,方便调用。

上箭头

最简单,都不需要2层包围,直接用一个<i>标签就够了,关键是设置字体大小(控制箭头大小),设为字体大小一半,宽和字体大小一致

your text

     i{
            font:400 150px/150px "宋体";
            position: absolute;
            height:75px;
            width: 150px;
            overflow: hidden;
      }

下箭头

your text

最简单,都不需要2层包围,直接用一个<i>标签就够了,关键是设置字体大小(控制箭头大小),设为字体大小一半,宽和字体大小一致,另加上s设置成向上偏移高度一般

     i{
            font:400 150px/150px "宋体";
            position: absolute;
            height:75px;
            width: 150px;
            overflow: hidden;
      }

     s{
            position: absolute;
            top: -75px;
      }

左箭头

your text

依葫芦画瓢,和上箭头一样,长和宽换一下就可以了。也不需要2层包围,直接用一个<i>标签就够了,关键是设置字体大小(控制箭头大小),设为字体大小一半,高和字体大小一致

     i{
            font:400 150px/150px "宋体";
            position: absolute;
            width:75px;
            height: 150px;
            overflow: hidden;
      }

右箭头

your text

最简单,都不需要2层包围,直接用一个<i>标签就够了,关键是设置字体大小(控制箭头大小),设为字体大小一半,高和字体大小一致,另加上s设置成向左偏移宽度一半

     i{
            font:400 150px/150px "宋体";
            position: absolute;
            width:75px;
            height: 150px;
            overflow: hidden;
      }

     s{
            position: absolute;
            left: -75px;
      }