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>