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

Question

我正在尝试将三角形添加到This Demo

中活动类的顶部边框

！[在此输入图片说明] [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;
}