css - 将向下三 Angular 形添加到顶部边框

Question

我正在尝试将三 Angular 形添加到 this demo 中事件类的顶部边框.

我正在使用这个 CSS 规则:

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

但如您所见，我没有得到三 Angular 形，而且元素 (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;
}