<!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;
width: 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>
注意：
先给一个对象画三角，然后把颜色改变至对应颜色，接着复制多个模块，修饰下头尾即大功告成。
时间： 2024-08-06 18:56:45