css 底部菜单凸起怎么做

要创建一个底部菜单凸起效果，可以使用CSS的伪元素和边框技巧来实现。以下是一个基本的示例代码：

HTML:

<nav class="bottom-menu">
  <ul>
    <li><a href="#">首页</a></li>
    <li><a href="#">产品</a></li>
    <li><a href="#">服务</a></li>
    <li><a href="#">关于我们</a></li>
  </ul>
</nav>

CSS:

.bottom-menu {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.3);
}

.bottom-menu ul {
  display: flex;
  justify-content: space-around;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0;
}

.bottom-menu li {
  position: relative;
}

.bottom-menu li a {
  display: block;
  padding: 10px 20px;
  color: #fff;
  text-decoration: none;
}

.bottom-menu li:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 50px 30px 50px;
  border-color: transparent transparent #333 transparent;
}

解释：

- `.bottom-menu` 设置菜单的定位和背景颜色。
- `.bottom-menu ul` 设置菜单列表的样式和布局。
- `.bottom-menu li` 为每个菜单项设置相对定位。
- `.bottom-menu li a` 设置菜单链接的样式。
- `.bottom-menu li:before` 使用伪元素 `:before` 创建一个三角形，作为菜单凸起效果。使用绝对定位将其定位在相应菜单项的底部中间。

这样就可以创建一个简单的底部菜单凸起效果。可以根据自己的需要进行修改和扩展。