css3 斜角导航 |css适配电脑

.nav {
display: flex;
justify-content: center;
align-items: center;
background-color: #00bfff;
}
.nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.nav li {
position: relative;
margin: 0 10px;
}
.nav li:hover {
background-color: #fff;
color: #00bfff;
}
.nav li a {
display: block;
padding: 10px 15px;
color: #fff;
text-decoration: none;
position: relative;
}
.nav li a::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
border-left: 20px solid transparent;
border-top: 20px solid #00bfff;
transform: translateY(-100%);
}
.nav li a::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 0;
border-right: 20px solid transparent;
border-bottom: 20px solid #00bfff;
transform: translateY(100%);
}

首先，在HTML中添加一个导航条的容器，并在其中添加无序列表（ul）和列表项（li）。然后，在CSS中设定导航条（.nav）为flex布局，并设置背景色为#00bfff。接着，将无序列表（ul）的样式设定为无列表样式（list-style: none），并设置边距和填充为0。将列表项（li）设定为相对定位（position: relative），并在其悬停时设置背景色和文字颜色。然后，将导航链接（a）设定为块级元素（display: block），设定填充、颜色、字体样式和相对定位（position: relative），以便让斜角部分相对于链接进行定位。

最后，使用伪元素（::before和::after）创建斜角部分。通过设置border属性的大小和颜色，来实现斜角的效果。以::before伪元素为例，使用border-left和border-top属性来设定一个三角形，将其左侧的边线设定为透明，再通过translateY将三角形向上移动。对于::after伪元素，则是反过来的操作，将三角形向下移动。通过这样的操作，就可以实现CSS3的斜角导航效果。