css - 如何使用 CSS 将 "arrow-down"三 Angular 形添加到响应式选项卡

Question

我正在使用 Responsive tabs通过 petelove666我想添加一个小细节，但似乎无法让它发挥作用。

我想要在事件标签的中间有一个由三 Angular 形组成的向下箭头。

我试图将 CSS 更改为

.responsive-tabs__list__item--active{
    background: white;
    color: #3E4649;
    /*border-bottom: 2px solid #F39114;*/
    position: absolute;
    margin-left: -50px;
    width: 0;
    height: 0;
    border-top: solid 20px #F39114;
    border-left: solid 5px transparent;
    border-right: solid 5px transparent;
}

但它根本不起作用。

这是我的 fiddle https://jsfiddle.net/dvx8nw15/ .目标是在事件选项卡的中间有一个向下箭头，如所附蓝色图片所示:

Answer 1

您需要做的就是向 list__item 添加一个绝对居中的三 Angular 形:

.responsive-tabs__list__item { position: relative }

.responsive-tabs__list__item--active:after {
    content: '';
    height: 0;
    width: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid black;
    left: 0;
    right: 0;
    top: 100%;
    margin: auto;
    position: absolute;
    display: block;
}

和更新的fiddle