如何在底部使用CSS三角形并将其居中于div（水平菜单栏）？

Question

如何在底部使用CSS三角形并将其居中于div（水平菜单栏）？

菜单栏宽度为100％;

Answer 1

将position:relative添加到li

的CSS中

Demo Fiddle

li {
    display: table-cell;
    list-style: none;
    text-align: center;
    padding: 20px;
    color: black;
    font-size: 18px;
    position:relative; /* <-- this */
}

您可能还想修改CSS的其余部分：

#bar {
    width:100%;
    height: 100px;
}
li {
    list-style: none;
    text-align: center;
    padding: 20px;
    color: black;
    font-size: 18px;
    position:relative;
    display:inline-block; /* <-- make the items appear on the same row, you shouldnt be using displace:table-cell */
}
.btn.selected {
    color: black !important;
    font-size: 18px;
    background-color: #f7eee7;
}
.btn:hover:after {
    content:"";
    position: absolute;
    left:calc(50% - 9px); /* <-- ensure your triangles are centered */
    bottom: 0;
    width: 0%;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid black;
}

Answer 2

首先，您需要将position:relative添加到.btn类

要使箭头居中，您需要添加相当于其宽度一半的负左边距或使用CSS3变换。

JSfiddle Demo

<强> CSS

#bar {
    width:100%;
    height: 100px;
}
li {
    display: table-cell;
    list-style: none;
    text-align: center;
    padding: 20px;
    color: black;
    font-size: 18px;
}
.btn {
    position: relative;
}
.btn:after {
    content:"";
    position: absolute;
    left:50%;
    -webkit-transform:translateX(-50%);
    transform:translateX(-50%);
    bottom: 0;
    width: 0%;
    height: 0;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
    border-bottom: 9px solid black;
    display: none;
}
.btn:hover:after {
    display: block;
}
.btn.selected {
    color: black !important;
    font-size: 18px;
    background-color: #f7eee7;
}