时间：2024-02-16 01:30:01 | 来源：网站运营
时间：2024-02-16 01:30:01 来源：网站运营
怎么用HTML+CSS制作如图所示的网页导航栏?：这种导航栏于正常的导航栏最大的区别无非就是多了一个斜角的部分。只要会调整这个斜角，也就简单了。可以使用边框调整出三角形拼凑在两端就可以了，实现的方式有很多，熟练掌握css就很容易做出来了，下面写一个案例，主要使用的是伪元素和边框调整三角形。仅供你参考，你也可以使用其他的方式实现。
在线咨询
<ul> <li></li> <li></li> <li></li> <li></li> <li></li> </ul>CSS代码： <style> ul { overflow: hidden; } ul li { float: left; list-style: none; width: 150px; height: 40px; } ul li:nth-child(odd) { background-color: black; } ul li:nth-child(even) { position: relative; background-color: #00f800; } /* 使用伪元素添加斜角部分 */ ul li:nth-child(even)::before, ul li:nth-child(even)::after { content: ""; position: absolute; box-sizing: border-box; height: 40px; width: 20px; } /* 使用边框调整出斜角部分 */ ul li:nth-child(even)::before { left: 0px; border-top: 20px solid #00f800; border-right: 10px solid #00f800; border-left: 10px solid black; border-bottom: 20px solid black; } ul li:nth-child(even)::after { right: -20px; border-top: 20px solid black; border-right: 10px solid black; border-left: 10px solid #00f800; border-bottom: 20px solid #00f800; } </style>关键词：导航
