Active tab pointing to inactive tabs using CSS? - html

Question

Is there a way, using CSS, to make it so that when clicking a tab (as shown in the diagram below), the tab "points" to an inactive tab?
I'm trying to make it so that the green Tab 1 (in the diagram below) points to Tabs 2 and 3, and then if you click Tab 2, it points to Tab 3. However, when you click Tab 3, it would remain rectangular (with no arrow).
I have been trying various Stack Overflow snippets which successfully place the arrow above or below the tab, but none seem to work in overlapping the inactive tab next to the active tab.
This is the basic structure of my HTML:
<ul>
<li class="active">
Tab 1
</li>
<li>
Tab 2
</li>
<li>
Tab 3
</li>
</ul>
As for the CSS, I've been using snippets like this one: https://codepen.io/mimoYmima/pen/MwzQym
The issue I've been running into seems to be that, because the tabs are floated left, I can't make the active tab's arrow overlap the other tabs.

Answer 1

Just add triangle using pseudoelement to active tab and other to simulate triangle border. Demo:
ul {
list-style-type: none;
display: flex;
margin: 0;
padding: 0;
}
ul > li {
padding: 10px 40px;
font-weight: bold;
font-size: 24px;
height: 40px;
border: 1px solid #000;
border-right: none;
background: linear-gradient(to bottom, #fdfdfd, #828282);
}
ul > li.active {
background: #66d835;
position: relative;
}
ul > li.active:before,
ul > li.active:after {
content: "";
position: absolute;
left: 100%;
top: 0;
}
/* triangle border for active tab */
ul > li.active:before {
transform: translateX(1px);
border: 30px solid transparent;
border-left-color: #000;
z-index: 1;
}
/* triangle for active tab */
ul > li.active:after {
/* border-width equal half of the height */
border: 30px solid transparent;
border-left-color: #66d835;
z-index: 2;
}
/* border-radius for first tab */
ul > li:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
/* border-radius for last tab but not active */
/* and right border */
ul > li:not(.active):last-child {
border-right: 1px solid #000;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
ul > li > a {
height: 100%;
/* styles for text centering */
display: flex;
align-items: center;
justify-content: center;
}
ul > li > a,
ul > li > a:hover,
ul > li > a:active,
ul > li > a:visited {
color: inherit;
text-decoration: none;
}
<ul>
<li class="active">
Tab 1
</li>
<li>
Tab 2
</li>
<li>
Tab 3
</li>
</ul>

Answer 2

You can leverage a pseudo element with absolute positioning as the arrow for the active tab. It will be hidden unless the list item is given the 'active' tab. Original HTML markup remains untouched.
html,
body {
height: 100%;
margin: 0;
}
html {
font-family: sans-serif;
}
body {
display: flex;
}
ul {
margin: auto;
padding: 0;
display: inline-block;
list-style-type: none;
overflow: hidden;
background-color: #eee;
background-image: linear-gradient( #fff, #ddd);
border-radius: 1rem;
border: 1px #888 solid;
font-weight: bold;
}
li {
float: left;
padding: 1.5rem 4rem;
border-right: 1px #aaa solid;
position: relative;
}
li:last-child {
border: none;
}
a {
text-decoration: none;
color: #000;
}
.active {
background-color: #0b0;
background-image: linear-gradient( #0b0, #090 );
}
li.active::after {
content:'';
width: 3rem;
height: 3rem;
background-color: #eee;
position: absolute;
border: none;
transform: scaleX( 0.75 ) rotate( 45deg ) translate( -50% );
top: 50%;
right: -2.45rem;
margin-top: -0.45rem;
border-top: 1px #888 solid;
border-right: 1px #888 solid;
background-color: #0b0;
background-image: linear-gradient( 130deg, #0b0, #090 );
border-top-right-radius: 0.5rem;
}
<ul>
<li class="active">
Tab 1
</li>
<li>
Tab 2
</li>
<li>
Tab 3
</li>
</ul>

Answer 3

You don't need to float the arrow divs.
I have forked the codepen you linked to and edited the CSS to create the effect in the graphic you've shared. Here's my edited version:
https://codepen.io/sigil/pen/YxWZGa
<!-- language: lang-css -->
/* Button-arrow CSS: */
.arrow {
cursor: pointer;
display: inline-block;
height: 40px;
position: relative;
line-height: 2.5em;
padding-left: 2em;
padding-right: 2em;
background: white;
color: black;
border: 1px solid #eee;
}
.arrow:after {
border-left: 20px solid white;
}
.arrow.active {
background-color: yellow;
}
.arrow.active,
.arrow.active:after {
z-index: 50;
border-left: 20px solid yellow;
}
.arrow.active:after {
content: "";
position: absolute;
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
height: 0px;
width: 0px;
margin-right: -20px;
right: 0;
}
.arrow:hover,
.arrow:active {
background: yellow;
color: black;
}
.arrow:hover:after,
.arrow:active:after {
border-left: 20px solid yellow;
}
/* General styles to set a baseline 'look' - not related to the button-arrow CSS above */
body, html {
font-family: helvetica;
background: #333;
color: #CCC;
}
.content {
text-align: center;
margin: 0 auto;
}
a:visited, a:link {
color: #F93;
}
<!-- language: lang-html -->
<html>
<body>
<div class="content">
<p>Button with an arrow on the right. Just uses an anchor tag and css, so you can use it with your existing buttons easily by just adding the class of "arrow"! Also includes a hover state.</p>
<a class="arrow active">Arrow</a><a class="arrow">Arrow</a><a class="arrow">Arrow</a>
</div>
</body>
</html>
<!-- end snippet -->