css2实现尖角箭头式导航
浏览数：22 /
时间：2015年06月09日
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title></title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> *{padding: 0px;margin: 0px;} ul{ overflow: hidden; margin: 0 auto;margin-left:80px;} ul li { margin-left:-35px; float:left; list-style-type: none; height:40px; font:16px/40px microsoft yahei; color:#fff; } ul li span{ border:20px solid transparent; border-left:15px solid #fff; float: right; position: relative; } ul li em{ border:20px solid transparent; border-left:15px solid #2b2937; float: right; position: absolute; top:-20px; left:-15px; z-index: 1;} ul li a{color:#fff; text-decoration: none; padding:0 15px 0 40px; background: #2b2937; height:40px; display: block; float: left} ul li:hover a{background:#394165;float: left; color:#fff;} ul li:hover em{border-left-color:#394165 } ul li strong{ display: block;border:20px solid transparent; border-left:15px solid #fff;height:0px; float: left; margin-left:-5px;} </style> </head> <body> <ul> <li><a href="#" ><strong></strong>首页</a><span><em></em></span></li> <li><a href="#" >公司简介</a><span><em></em></span></li> <li><a href="#" >公司简介</a><span><em></em></span></li> <li><a href="#" >公司简介</a><span><em></em></span></li> <li><a href="#" >公司简介</a><span><em></em></span></li> <li><a href="#" >公司简介</a><span><em></em></span></li> <li><a href="#" >公司简介</a><span><em></em></span></li> </ul> </body> </html>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
