CODEWITHSUNDEEP
css
skrat
skrat

Reputation: 748

How to add "arrow-down" triangle with CSS to responsive tabs

I'm using Responsive tabs by petelove666 and I have a small detail I'd like to add but it seems I can not get it to work.

I would like a arrow-down formed by triangle at the middle of active tab.

I tried to change CSS to

.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;
}

But it doesn't work at all.

Here is my fiddle https://jsfiddle.net/dvx8nw15/. And the goal is to have a down arrow at the middle of active tab as seen from the attached picture with blue color: enter image description here

Upvotes: 0

Views: 2262

Answers (3)

Nacorga
Nacorga

Reputation: 526

Just add position: relative to your li.responsive-tabs__list__item. And then use a pseudoclass to print the arrow in your active item with this code:

.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;
}

You can find an example in this fiddle

Upvotes: 1

n1stre
n1stre

Reputation: 6086

All you need to do is to add an absolutely centered triangle to 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;
}

And the updated fiddle

Upvotes: 1

Itay Gal
Itay Gal

Reputation: 10834

Remove the list-style-type from the list items and add a div that will be your arrow. The triangle trick is to set an element with size 0 but to set a border, the top border in that case is actually a triangle, so when you give it a color and set the other side to be transparent you'll get a triangle.

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;
}
<ul>
  <li><div class="arrow"></div>One</li>
  <li><div class="arrow"></div>Two</li>
  <li><div class="arrow"></div>Three</li>
</ul>

UPDATE

Adding a fiddle without adding a div and using :before pseudo element instead

Example with your code

You need to add class arrow to each li you want to style or otherwise add it to the container once and then set .arrow li instead of li.arrow

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

Upvotes: 1

Related Questions