css 底部菜单凸起怎么做

你可以使用 CSS 的伪元素 `::before` 和 `::after` 来实现这个效果。下面是一个简单的示例：

HTML：

<div class="menu">
  <ul>
    <li><a href="#">菜单1</a></li>
    <li><a href="#">菜单2</a></li>
    <li><a href="#">菜单3</a></li>
    <li><a href="#">菜单4</a></li>
  </ul>
</div>

CSS：

.menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}

.menu ul li {
  position: relative;
}

.menu ul li a {
  display: block;
  padding: 10px 20px;
  background-color: #333;
  color: #fff;
  text-decoration: none;
  position: relative;
  z-index: 1;
}

.menu ul li a::before,
.menu ul li a::after {
  content: "";
  position: absolute;
  bottom: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  z-index: -1;
}

.menu ul li a::before {
  left: 0;
  border-color: transparent transparent #333 transparent;
}

.menu ul li a::after {
  right: 0;
  border-color: transparent transparent #333 transparent;
}

这个 CSS 代码会为底部菜单项的每个链接添加一个底部的三角形凸起。你可以适当调整 `padding` 和 `border-width` 的值来改变凸起的大小。