做一个按照步骤提示的效果，做完后发现博客园里面有一篇累死的文章，好像是翻译的外国人的，不过我的可是原产自中国的国产货
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style> .arr{ margin:0; padding:0; list-style:none; width:960px; margin:100px auto;} .arr li{float:left;} .arr li a{ background:#0099FF;height:40px; padding:0 5px 0 20px; display:block; line-height:40px; color:#fff; text-decoration:none; position:relative; margin:0 3px;font-size:12px;margin:0 7px ; } .arr li a:before{ width:0; height:0; position:absolute; border-left:15px solid #fff;border-top:20px solid #0099ff;border-right:0px solid #0099ff;border-bottom:20px solid #0099ff; display:block; left:0; top:0; content:""; z-index:1;} .arr li a:after{ width:0; height:0; border-left:15px solid #0099FF;border-top:20px solid transparent;border-right:0 solid transparent;border-bottom:20px solid transparent; display:block; position:absolute; right:-15px; top:0; content:""; z-index:10} .arr li a:hover{ background:#f00} .arr li a:hover:after{border-left:15px solid #f00;} .arr li a:hover:before{ border-left:15px solid #fff;border-top:20px solid #f00;border-right:0px solid #f00;border-bottom:20px solid #f00;} .arr li:first-child a{ border-top-left-radius:3px; border-bottom-left-radius:3px;} .arr li:last-child a{ border-radius:3px; padding-right:10px} .arr li:first-child a:before{ border:0 solid #0099FF;} .arr li:last-child a:after{ border:0 solid #0099FF; border-radius:3px;} </style> </head> <body> <ul class="arr"> <li><a href="#">第一步</a></li> <li><a href="#">第二步</a></li> <li><a href="#">第三步</a></li> <li><a href="#">第四步</a></li> </ul> </body> </html
