1 <!DOCTYPE html>
2 <html lang="zh">
3 <head>
4 <meta charset="UTF-8">
5 <title>流程图箭头</title>
6 <style type="text/css">
7 *{
8 margin:0;
9 padding:0;
10 }
11 .container{
12 margin:50px 100px;
13 }
14 li{
15 display:inline-block;
16 padding-left:20px;
17 }
18 a{
19 padding-left:20px;
20 padding-right:20px;
21 line-height:40px;
22 background-color:#50abe4;
23 display:block;
24 text-decoration:none;
25 position:relative;
26 color:#fff;
27 }
28 a:after{
29 content:'';
30 width:0;
31 height:0;
32 position:absolute;
33 right:-40px;
34 top:0;
35 border:20px solid;
36 border-color:transparent transparent transparent #50abe4;
37 }
38 a:before{
39 content:'';
40 width:0;
41 height:0;
42 position:absolute;
43 left:-20px;
44 top:0;
45 border:20px solid;
46 border-color: #50abe4 transparent #50abe4 transparent;
47 }
48 li:first-child{
49 padding-left:0;
50 }
51 li:first-child a{
52 border-radius:4px 0 0 4px;
53 }
54 li:last-child a{
55 border-radius:0px 4px 4px 0;
56 }
57 li:first-child a:before,li:last-child a:after{
58 display:none;
59 }
60 a:hover{
61 background-color:#ef72b6;
62 }
63 a:hover:before{
64 border-top-color:#ef72b6;
65 border-bottom-color:#ef72b6;
66 }
67 a:hover:after{
68 border-left-color:#ef72b6;
69 }
70 </style>
71 </head>
72 <body>
73 <div class="container">
74 <ul>
75 <li><a href="javascript:;">首页</a></li>
76 <li><a href="javascript:;">首页</a></li>
77 <li><a href="javascript:;">测试文字</a></li>
78 <li><a href="javascript:;">首页</a></li>
79 <li><a href="javascript:;">首页</a></li>
80 <li><a href="javascript:;">首页</a></li>
81 </ul>
82 </div>
83 </body>
84 </html>
