<main>
<nav class="tab-arrow">
<input id="tab-arrow-1" name="tab-arrow" type="radio"/>
<input id="tab-arrow-2" name="tab-arrow" type="radio"/>
<input id="tab-arrow-3" name="tab-arrow" type="radio"/>
<input id="tab-arrow-4" name="tab-arrow" type="radio"/>
<input id="tab-arrow-5" name="tab-arrow" type="radio"/>
<label for="tab-arrow-1">1</label>
<label for="tab-arrow-2">2</label>
<label for="tab-arrow-3">3</label>
<label for="tab-arrow-4">4</label>
<label for="tab-arrow-5">5</label>
<hr/>
</nav>
</main>
$p: 12px;
$n: 5;
// container
.tab-arrow {
display: flex;
position: relative;
background: white;
border-radius: 2px;
overflow: hidden;
// border
hr {
transition: all 375ms ease-out;
will-change: transform, background;
position: absolute;
z-index: 1;
bottom: 0;
left: 0;
margin: 0;
border: 0;
border-radius: 2px;
height: 100%;
width: calc(100% / #{$n});
background: lighten($slate, 50%);
&:before, &:after {
transition: all 375ms ease-out;
will-change: border-color;
content: "";
display: block;
position: absolute;
top: 0;
border: 32px solid lighten($slate, 50%);
border-left-width: $p;
border-right-width: $p;
}
&:before {
left: 0;
border-left-color: white!important;
}
&:after {
right: -$p/2;
border-top-color: white!important;
border-bottom-color: white!important;
border-right-color: white!important;
}
}
// text for the radio inputs
label {
cursor: pointer;
display: block;
position: relative;
z-index: 2;
width: calc(100% / #{$n});
padding: $p*2;
text-align: center;
text-transform: capitalize;
}
// radio inputs
input {
cursor: pointer;
opacity: 0;
appearance: none;
display: block;
position: absolute;
top: 0;
left: 0;
margin: 0;
width: calc(100% / #{$n});
height: 100%;
z-index: 2;
&:hover {
~ hr {
background: mix(lighten($slate, 50%), $blue, 75%);
transition: transform 250ms cubic-bezier(0,.5,.5,1.1), background 250ms ease-out;
&:before, &:after {
border-color: mix(lighten($slate, 50%), $blue, 75%);
transition: all 250ms ease-out;
}
}
}
&:active {
~ hr {
background: $blue;
transition: all 250ms ease-out;
&:before, &:after {
border-color: $blue;
transition: all 250ms ease-out;
}
}
}
// loop for positioning inputs over labels
@for $i from 1 through $n {
&:nth-of-type(#{$i}) {
left: calc(100% / #{$n} * #{$i - 1});
&:checked {
~ hr {
transform: translateX(#{($i - 1) * 100%});
}
}
&:hover, &:focus, &:active {
~ hr, ~ input:checked ~ hr {
transform: translateX(#{($i - 1) * 100%});
}
}
}
}
}
}
// additional styling
body {
display: flex;
flex-flow: row wrap;
align-items: center;
align-content: center;
justify-content: center;
}
main {
width: 100%;
max-width: 800px;
padding: $p/2;
background: lighten($slate, 75%);
@media only screen and (min-width: 800px) {
border-radius: 2px;
}
}
This Pen doesn't use any external JavaScript resources.