流程图箭头 

 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>

 

posted @ 2015-12-25 14:18  黑客PK  阅读(465)  评论(0)    收藏  举报