css 底部菜单中间凸起 |css 查询模板

menu-item {
position: relative;
display: inline-block;
padding: 10px;
}
menu-item:before {
content: "";
position: absolute;
left: 50%;
bottom: -10px;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #fff;
transform: translateX(-50%);
}

上面的代码使用了伪元素（:before）来实现下方的凸起效果。首先，大家需要为菜单项设置相对定位，并在其下方添加伪元素。然后，大家使用 border 属性来创建一个等腰直角三角形，使其底部边框为白色，左右两侧均为透明。

最后，大家设置伪元素的 left 为 50%，这样就可以让三角形在菜单项的正中间了。但此时它的位置会有些偏上，所以大家设置其 bottom 为 -10px，让它向下移动一定距离。

这样，一个漂亮的中间凸起的 CSS 底部菜单就完成了。通过简单的 CSS 样式调整，大家可以让它更加精致，为用户提供更好的使用体验。