<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body { background: gainsboro; } ul li { /* border-radius: 5px; 让边框变得圆润*/ margin-left: 3px;/*实现子导航间的白色三角空白*/ display: inline-block; 120px; line-height: 40px; position: relative; float: left; background: powderblue; color: whitesmoke; text-align: center; } /*before&after各自画一个三角*/ ul li:after{ content: ""; display: block; border-top:20px solid transparent; border-bottom:20px solid transparent; border-left:20px solid powderblue; position: absolute; top: 0; right: -20px; z-index: 1; } ul li:before{ content: ""; display: block; border-top:20px solid powderblue; border-bottom:20px solid powderblue; border-left:20px solid white; position: absolute; top: 0; } /*去除头尾的三角*/ ul li:first-child:before ,ul li:last-child:after{ display: none; } </style> </head> <body> <ul> <li>first</li> <li>second</li> <li>third</li> <li>four</li> </ul> </body> </html>
注意：
先给一个对象画三角，然后把颜色改变至对应颜色，接着复制多个模块，修饰下头尾即大功告成。