本地测试的时候略有改变
HTML:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" type="text/css" href="https://necolas.github.io/normalize.css/5.0.0/normalize.css"> <link rel="stylesheet" type="text/css" href="demo.css"> </head> <body> <div> <ul> <li><a href="#" title="">Home</a></li> <li><a href="#" title="">About</a></li> <li><a href="#" title="">Info</a></li> <li><a href="#" title="">Contact</a></li> </ul> </div> </body> </html>
CSS:
.daohang ul { list-style: none; } .daohang ul li a { float: left; margin-right: 30px; display: inline-block; position: relative; height: 30px; padding: 10px 20px 0 20px; text-align: center; background-color: #3498db; color: #fff; text-decoration: none; font-size: 20px; } .daohang ul li a:before { content: ""; border-top: 20px solid #3498db; border-bottom: 20px solid #3498db; border-left: 20px solid transparent; position: absolute; top: 0; left: -20px; } .daohang ul li a:after { content: ""; border-left: 20px solid green; border-top: 20px solid red; border-bottom: 20px solid red; position: absolute; right: -20px; top: 0; }