0
CSSを使用して、タブを右側の角度（ウィザードタイプ）で表示しました。そのが下側に追加の行を示すクローム& IE 11としかしMozilla Firefoxの中にその作業罰金は（スクリーンショットを参照してください）：Mozilla FirefoxでCSSタブが正しく表示されない
JSFiddleを：https://jsfiddle.net/LwdejrLm/
.tabs {
margin: 0;
padding: 0;
list-style: none;
}
.tabs.three li {
width: 31.4%;
}
.tabs.four li {
width: 23%;
}
.tabs>li {
position: relative;
overflow: visible;
border-right: 15px solid transparent;
border-left: 15px solid transparent;
float: left;
}
.tabs>li+li {
margin-left: 0;
}
.tabs>li:first-child {
border-left: 0;
}
.tabs>li:last-child {
border-right: 0;
}
.tabs>li span {
border-radius: 0;
background-color: #e04411;
padding: 10px;
display: inline-block;
padding: 11px 20px;
color: #fff;
width: 100%;
}
.tabs>li .tbno {
position: absolute;
width: 20px;
height: 20px;
right: 0;
top: 5px;
background: rgba(255, 255, 255, 0.8);
color: #333;
border-radius: 100%;
text-align: center;
vertical-align: middle;
padding: 5px;
}
.tabs>li:last-child .tbno {
right: -30px;
}
.tabs>li .nav-arrow {
position: absolute;
top: 0px;
right: -30px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 10px 20px 20px;
border-color: #fff #fff #fff #e04411;
z-index: 150;
}
.tabs>li .nav-wedge {
position: absolute;
top: 0px;
left: -20px;
width: 0px;
height: 0px;
border-style: solid;
border-width: 20px 0 20px 20px;
border-color: #e04411 #eeeeee #e04411 transparent;
z-index: 150;
}
.tabs>li.active .nav-arrow {
border-color: #fff #fff #fff #444;
}
.tabs>li.active .nav-wedge {
border-color: #444 #444 #444 transparent;
}
.tabs>li.active span {
background-color: #444;
color: #fff;
width: 100%;
}
@media (max-width: 1200px) {
.tabs.three li {
width: 22%;
}
.tabs.four li {
width: 22%;
}
}
@media (max-width: 992px) {
.tabs.four li {
width: 20%;
}
}
@media (max-width: 640px) {
.tabs.four li {
width: 18.5%;
}
.tabs>li span {
padding: 11px 6px;
}
.tabs>li .tbno {
display: none;
}
}
@media (max-width: 400px) {
.tabs.four li {
width: 17%;
}
}<ul class="tabs four">
<li><span>Booking</span>
<div class="tbno">1</div>
<div class="nav-arrow"></div>
</li>
<li>
<div class="nav-wedge"></div>
<span>Services</span>
<div class="tbno">2</div>
<div class="nav-arrow"></div>
</li>
<li class="active">
<div class="nav-wedge"></div>
<span>Confirmation</span>
<div class="tbno">3</div>
<div class="nav-arrow"></div>
</li>
<li>
<div class="nav-wedge"></div>
<span>Payment</span>
<div class="tbno">4</div>
</li>
</ul>
ちょうど、私もChromeに望ましくない行があります。 1つの赤/黒、1つの白。 21px – domsson