如何使用CSS向响应选项卡添加“向下箭头”三角形

Question

我使用的是Responsive tabs的petelove666，我想添加一个小细节，但似乎无法使用。

我想要一个由活动选项卡中间的三角形组成的向下箭头。

我试图将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;
}

但这根本不起作用。

这是我的小提琴https://jsfiddle.net/dvx8nw15/。目标是在活动选项卡的中间有一个向下箭头，如所附的蓝色图片所示：

Answer 1

从列表项中删除(#100) Tried accessing nonexisting field (business_discovery) on node type (InstagramUser) ，然后添加一个将成为箭头的div。三角形的窍门是设置一个大小为0的元素，但要设置一个边框，在这种情况下，顶部边框实际上是一个三角形，因此当您给它提供颜色并将另一侧设置为透明时，您将得到一个三角形。

list-style-type

li{
  list-style-type:none;
  display: flex;
  align-items: center;
}

.arrow{
  width: 0px;
  height: 0px;
  border: 5px solid transparent;
  border-top-color: #F39114;
  margin-top: 0.2em;
  margin-right: 0.2em;
}

更新

添加小提琴而不添加div，而是使用：before伪元素

Example with your code

您需要向要设置样式的每个li添加类<ul> <li><div class="arrow"></div>One</li> <li><div class="arrow"></div>Two</li> <li><div class="arrow"></div>Three</li> </ul>，否则将其添加到容器一次，然后设置arrow而不是.arrow li

Second example - better since you don't need to style each li

Answer 2

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

.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

Answer 3

只需将position: relative添加到您的li.responsive-tabs__list__item中即可。然后使用伪类使用以下代码在活动项中打印箭头：

.responsive-tabs__list__item--active:after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    width: 20px;
    height: 20px;
    background: black;
    margin-left: -10px;
    transform: rotate(45deg);
    z-index: -1;
}

您可以在此fiddle

中找到示例