css3实现小箭头各种图形效果

css实现各种图形真是太赞了，再也不用切图了，直接用css就可以实现。

最常用的就是用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
#triangle-up{
    display:inline-block;
    width:0;
    height:0;
    border-left:30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom:50px solid red;}
#triangle-down {
    display:inline-block;
    width:0;
    height:0;
    border-left:30px solid transparent;
    border-right: 30px solid transparent;
    border-top:50px solid red;}
#triangle-left {
    display:inline-block;
    width:0;
    height:0;
    border-top: 30px solid transparent;
    border-right: 50px solid red;
    border-bottom: 30px solid transparent;}
#triangle-right{
    display:inline-block;
    width:0;
    height:0;
    border-top: 30px solid transparent;
    border-left: 50px solid red;
    border-bottom: 30px solid transparent;}

 

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
#triangle-topleft {
    display:inline-block;
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-right: 50px solid transparent;
}
#triangle-topright {
    display:inline-block;
    width: 0;
    height: 0;
    border-top: 50px solid red;
    border-left: 50px solid transparent;
}
#triangle-bottomleft {
    display:inline-block;
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-right: 50px solid transparent;
}
#triangle-bottomright {
    display:inline-block;
    width: 0;
    height: 0;
    border-bottom: 50px solid red;
    border-left: 50px solid transparent;
}
通过这样的小箭头在项目中我们可以实现验证提示层箭头这样的样式，非常的实用，再也不用为提示层样式发愁啦。