向上边界添加三角形的问题

Question

我正在尝试在此演示中将三角形添加到活动类的顶部边框

![在此输入图像说明] [2]

我正在使用这个CSS规则:

.xxx a {
    border-top: 3px solid #E1483F;
}
.xxx .active > a:after {
    border-top: 12px solid #E1483F;
}

但正如你所看到的,我没有得到三角形加上项目(CSS)正在向前移动.你能告诉我怎么解决这个问题吗？

谢谢

Answer 1

你可以这样做:

JSFiddle - DEMO

.navbar-nav > li {
    position: relative;
    text-align: center;
}
.active:before {
    content:" ";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 12px 12px 0 12px;
    border-color: #E1483F transparent transparent transparent;
}