Pure HTML/CSS list menu with "next" arrows - html

Question

I am trying to generate a pure HTML/CSS menu with arrows pointing to the right. As long as the active state is the first tab everything looks fine (http://jsfiddle.net/q03wma6u/). But when the active class moves to the second tab, the border and the arrow are not positioned togehter (http://jsfiddle.net/q03wma6u/1/).
Is there a way to generate this menu just using HTML/CSS?
ol.tabs {
-moz-transition: opacity 0.3s linear;
-o-transition: opacity 0.3s linear;
-webkit-transition: opacity 0.3s linear;
transition: opacity 0.3s linear;
margin: 0;
padding: 0;
list-style: none;
display: table;
table-layout: fixed;
width: 100%;
}
ol.tabs li {
position: relative;
display: table-cell;
overflow: hidden;
margin: 0;
padding: 0;
text-align: center;
text-transform: uppercase;
background-color: #ccc;
-moz-transition: background-color 0.3s linear;
-o-transition: background-color 0.3s linear;
-webkit-transition: background-color 0.3s linear;
transition: background-color 0.3s linear;
}
ol.tabs li:after {
content: " ";
display: block;
position: absolute;
top: 4px;
right: 6px;
width: 32px;
height: 32px;
border: 1px solid #4a4a4a;
border-bottom: none;
border-left: none;
border-radius: 2px;
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
ol.tabs li:last-child:after {
border: none;
}
ol.tabs li:last-child a:before {
border: none;
}
ol.tabs li.active a {
background-color: #fff;
-moz-transition: background-color 0.3s linear;
-o-transition: background-color 0.3s linear;
-webkit-transition: background-color 0.3s linear;
transition: background-color 0.3s linear;
}
ol.tabs li.active a:before {
content: " ";
display: block;
position: absolute;
top: 0px;
right: 0px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 0 20px 20px;
border-color: transparent transparent transparent #fff;
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
ol.tabs li.active a:after {
content: " ";
display: block;
position: absolute;
top: 0px;
left: 0px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 0 20px 20px;
border-color: transparent transparent transparent #ccc;
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
ol.tabs li:first-child a:after {
border: none;
}
ol.tabs li a {
display: block;
padding: 10px 0px;
margin-right: 20px;
color: #4a4a4a;
font-weight: bold;
text-decoration: underline;
}
ol.tabs li a.disabled {
cursor: initial;
font-weight: normal;
text-decoration: none;
}
ol.tabs li a.disabled:hover {
text-decoration: none;
}
<ol class="tabs">
<li class="step1 active">Step 1</li>
<li class="step2">Step 2</li>
<li class="step3">Step 3</li>
<li class="step4">Step 4</li>
</ol>

Answer 1

CSS
.breadcrumb {
list-style: none;
overflow: hidden;
font: 18px Helvetica, Arial, Sans-Serif;
}
.breadcrumb li {
float: left;
}
.breadcrumb li a {
color: white;
text-decoration: none;
padding: 10px 0 10px 55px;
background: brown; /* fallback color */
background: hsla(34,85%,35%,1);
position: relative;
display: block;
float: left;
}
.breadcrumb li a:after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid hsla(34,85%,35%,1);
position: absolute;
top: 50%;
margin-top: -50px;
left: 100%;
z-index: 2;
}
.breadcrumb li a:before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */
border-bottom: 50px solid transparent;
border-left: 30px solid white;
position: absolute;
top: 50%;
margin-top: -50px;
margin-left: 1px;
left: 100%;
z-index: 1;
}
.breadcrumb li:first-child a {
padding-left: 10px;
}
.breadcrumb li a:hover { background: hsla(34,85%,25%,1); }
.breadcrumb li a:hover:after { border-left-color: hsla(34,85%,25%,1) !important; }
<ul class="breadcrumb">
<li>Home</li>
<li>Vehicles</li>
<li>Vans</li>
<li>Camper Vans</li>
</ul>
change your css as mentioned in blow link
https://css-tricks.com/examples/TriangleBreadcrumbs/

Answer 2

How's this:
.tabs {
list-style: none;
padding: 0;
margin: 0;
}
.tabs a {
display: table-cell;
text-align: center;
vertical-align: middle;
color: #4a4a4a;
text-decoration: none;
text-transform: uppercase;
}
.tabs > li {
float: left;
position: relative;
border: 1px solid #7B7B7B;
border-right: none;
width: 140px;
height: 50px;
background: #cccccc;
cursor: pointer;
display: table;
}
.tabs > li:before {
position: absolute;
top: 50%;
right: 0;
margin: -15px -13px;
border-top: solid 1px #7B7B7B;
border-right: solid 1px #7B7B7B;
width: 25px;
/* .tabs > li height/2 */
height: 29px;
/* .tabs > li height/sqrt(3) */
transform: rotate(30deg) skewY(30deg);
/* create a rhombus */
-ms-transform: rotate(30deg) skewY(30deg);
/* IE 9 */
-webkit-transform: rotate(30deg) skewY(30deg);
/* Safari and Chrome */
background: #cccccc;
/* 49.1deg = atan(1.15) = atan(height/width) */
/* percentages are 100 - .tabs > li percentages*/
content: '';
z-index: 1;
}
.tabs > li:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 40px;
background: #cccccc;
content: '';
z-index: 2;
}
.tabs > li.active,
.tabs > li.active:before,
.tabs > li.active:after {
background: #ffffff;
}
<ol class="tabs">
<li class="step1">Step 1</li>
<li class="step2 active">Step 2</li>
<li class="step3">Step 3</li>
<li class="step4">Step 4</li>
</ol>
Without borders and square end box for the end li:
.tabs {
list-style: none;
padding: 0;
margin: 0;
}
.tabs a {
display: table-cell;
text-align: center;
vertical-align: middle;
color: #4a4a4a;
text-decoration: none;
text-transform: uppercase;
}
.tabs > li {
float: left;
position: relative;
border-right: none;
width: 140px;
height: 50px;
background: #cccccc;
cursor: pointer;
display: table;
}
.tabs > li:before {
position: absolute;
top: 50%;
right: 0;
margin: -15px -13px;
border-top: solid 1px #7B7B7B;
border-right: solid 1px #7B7B7B;
width: 25px;
height: 29px;
transform: rotate(30deg) skewY(30deg);
-ms-transform: rotate(30deg) skewY(30deg);
-webkit-transform: rotate(30deg) skewY(30deg);
background: #cccccc;
content: '';
z-index: 1;
}
.tabs > li:after {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 40px;
background: #cccccc;
content: '';
z-index: 2;
}
.tabs > li.active,
.tabs > li.active:before,
.tabs > li.active:after {
background: #ffffff;
}
.tabs > li:last-child:before,
.tabs > li:last-child:after {display:none; content:none;}
<ol class="tabs">
<li class="step1">Step 1</li>
<li class="step2 active">Step 2</li>
<li class="step3">Step 3</li>
<li class="step4">Step 4</li>
</ol>