实现效果：
具体实现代码：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style> .wrapper { text-align: center; border-top: 1px solid #eee; margin-top: 50px; } .tabs { display: inline-block; text-align: center; border-bottom: solid 1px #eee; background: #fff; margin-top: -1px; padding: 0 64px; position: relative; } .tabs > a { display: inline-block; line-height: 44px; color: #aaaaaa; font-size: 14px; font-weight: bold; letter-spacing: 1px; text-decoration: none; padding: 0 26px; position: relative; } .tabs .left-line { content: ""; position: absolute; top: 0px; left: -1px; bottom: 0; border-top: 45px solid transparent; border-left: 45px solid #eee; } .tabs .left-line:before { content: ""; position: absolute; left: -48px; bottom: 0; border-top: 45px solid transparent; border-left: 45px solid #fff; } .tabs .right-line { position: absolute; right: -1px; top: 0; border-bottom: 45px solid #eee; border-left: 45px solid transparent; content: ""; } .tabs .right-line:before { position: absolute; right: -2px; top: 0; border-bottom: 45px solid white; border-left: 45px solid transparent; content: ""; } </style> </head> <body> <div class="wrapper"> <div class="tabs"> <span class="left-line"></span> <a href="javascript:;" >栏目一</a> <a href="javascript:;" >栏目二</a> <span class="right-line"></span> </div> </div> </body> </html>