css 底部菜单凸起怎么做

可以使用 CSS3 中的伪元素 `::before` 和 `::after` 来实现底部菜单凸起的效果。

首先，给菜单容器设置一个固定高度和一个背景颜色，然后给它的伪元素 `::before` 和 `::after` 分别设置一个宽度为 0、高度为 0、边框宽度为固定值、边框样式为实线、边框颜色为透明的三角形。

具体实现方式如下（假设菜单容器的 class 名称为 `.menu`）：

.menu {
  height: 80px;
  background-color: #f6f6f6;
  position: relative;
}

.menu::before,
.menu::after {
  content: '';
  position: absolute;
  bottom: 0;
  border-style: solid;
  border-color: transparent;
}

.menu::before {
  left: 0;
  border-width: 0 80px 30px 0;
  border-right-color: #f6f6f6;
}

.menu::after {
  right: 0;
  border-width: 30px 80px 0 0;
  border-left-color: #f6f6f6;
}

上述代码中，`.menu::before` 和 `.menu::after` 分别表示菜单容器的左边和右边的凸起部分。其中，`border-width` 属性用来设置边框的宽度和高度，`border-color` 属性用来设置边框的颜色。`border-right-color` 和 `border-left-color` 属性用来设置三角形边框的颜色，以达到和菜单容器相同的颜色。

效果如下图所示：