By

文章目录
  1. 1. 原理

一般实现一些>,<或者^，\/箭头的话，大多直接用图片或者图片文字，其实也可以用css来实现。

1
2
3
<div class="tvChoesn-box">
    <b class="arrow-tip"><i class="arrow-tip-outer"></i><i class="arrow-tip-inner"></i></b>
</div>

对应的css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
.tvChoesn-box{
    width:100px;
    height:100px;
    margin:0 auto;
    position:absolute;
    background: #1b1838;
}
.arrow-tip{
    width:12px;
    height:12px;
    position:absolute;
    left: 50px;
    top: -12px;
}
.arrow-tip-outer,.arrow-tip-inner{
    width:0px;
    height:0px;
    display:block;
    position:absolute;
    left:0px;
    top:0px;
    border-left:8px transparent dashed;
    border-right:8px transparent dashed;
    border-bottom:8px transparent dashed;
    border-top:8px white solid;
    overflow:hidden;
}
.arrow-tip-outer{
    top:2px;
    border-top:8px white solid;
}
.arrow-tip-inner{
    border-top:8px #1b1838 solid;
}

实现的效果如下：

原理

实际上就是利用border来控制箭头的方向，实心箭头其实不需要.arrow-tip-inner,而这里显示的是空心箭头，实际上就是在.arrow-tip-outer上下滑2px，所以效果看起来就像是一个空心箭头一样，实际上是两个实心箭头叠在一起，只是位置有交错而已。

文章目录
  1. 1. 原理