.nav{
background-color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 50px;
width: 100%;
margin: 0;
padding: 0;
list-style: none;
}
.nav li{
margin: 0;
padding: 0;
}
.nav li a{
text-decoration: none;
color: #fff;
font-size: 18px;
padding: 15px;
margin-right: 10px;
position: relative;
}
.nav li a::before{
content: "";
position: absolute;
top: 0;
right: -5px;
height: 0;
width: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 20px solid #333;
}
.nav li:last-child a{
margin-right: 0;
}
.nav li.active a{
background-color: #666;
}在上述代码中，首先定义了类名为“nav”的样式。该样式应该用于ul元素。这里将列表的样式设置为无符号，以确保没有任何符号在导航栏中显示。接下来，将UL元素的背景颜色、布局、高度和宽度定义为50像素高和宽100%，以确保导航栏在浏览器窗口中显示为一个单独的条形。最后，将UL的mv，pd属性定义为0，以确保导航栏与浏览器窗口的边缘之间没有任何间隔。
然后设置每个列表项的样式。由于定义了“unstyled”列表样式，因此可将默认的列表项 marg 和 pd 设置为0。下一步将是设置与链接相关的样式。在CSS样式表中，链接和其他HTML元素之间的关系最好用伪元素表示。在代码的下一部分中，将每个链接设置为相对位置。然后，使用“::before”伪元素在链接的右侧添加缺口效果。在这里，大家可以使用四个边界参数在“::before”伪元素中来定义缺口的形状。将右边界定义为负的宽度，以确保伪元素位于当前列表项链接的右侧。
最后，在最后一个列表项链接之后取消margin值。要在激活的链接中添加颜色，则可以将样式应用于每个列表项链接的active类，从而确保当前激活的链接看起来不同于其他链接。