ENTEREAL

作成のポイント

• タブの台形の足は、:beforeと、:after要素で作成する
• タブの前後関係が分かるように、タブの外周に線を入れる
• タブの台形の足の線を表現するのにも:beforeと、:after要素を使う
• 左のタブから前面に表示するため、html上は右のタブから記述して、float:rightを設定する
• JavaScriptは、クリック時の「.active」ステータスの遷移にのみ使用

Test 6
Test 5
Test 4
Test 3
Test 2
Test 1

			

.browser-tabs {
display: inline-block;
border-bottom: 1px solid #59698f;
margin: 20px;
padding: 0 40px;
}
.browser-tabs > li {
float: right;
position: relative;
list-style: none;
display: inline-block;
background-color: #EEE;
border: 1px solid #DDD;
border-bottom: none;
border-radius: 8px 8px 0 0;
margin: 0 5px;
}
.browser-tabs > li::before {
position: absolute;
bottom: 0;
left: -10px;
display: inline-block;
content: "";
width: 0;
height: 0;
border-top: 14px solid transparent;
border-right: 5px solid #DDD;
border-bottom: 14px solid #DDD;
border-left: 5px solid transparent;
}
.browser-tabs > li::after {
position: absolute;
bottom: 0;
right: -10px;
display: inline-block;
content: "";
width: 0;
height: 0;
border-top: 14px solid transparent;
border-right: 5px solid transparent;
border-bottom: 14px solid #DDD;
border-left: 5px solid #DDD;
}
.browser-tabs > li > a {
display: block;
outline: none;
color: #59698f;
text-decoration: none !important;
padding: 5px 15px;
}
.browser-tabs > li:hover > a,
.browser-tabs > li.active > a {
color: #FFF;
}

.browser-tabs > li > a::before {
position: absolute;
bottom: 0;
left: -9px;
display: inline-block;
content: "";
width: 0;
height: 0;
border-top: 14px solid transparent;
border-right: 5px solid #EEE;
border-bottom: 14px solid #EEE;
border-left: 5px solid transparent;
}
.browser-tabs > li > a::after {
position: absolute;
bottom: 0;
right: -9px;
display: inline-block;
content: "";
width: 0;
height: 0;
border-top: 14px solid transparent;
border-right: 5px solid transparent;
border-bottom: 14px solid #EEE;
border-left: 5px solid #EEE;
}

.browser-tabs > li:hover,
.browser-tabs > li.active {
background-color: #59698f;
border-color: #59698f;
}
.browser-tabs > li:hover::before,
.browser-tabs > li:hover > a::before,
.browser-tabs > li.active::before,
.browser-tabs > li.active > a::before {
border-right-color: #59698f;
border-bottom-color: #59698f;
}
.browser-tabs > li:hover::after,
.browser-tabs > li:hover > a::after,
.browser-tabs > li.active::after,
.browser-tabs > li.active > a::after {
border-bottom-color: #59698f;
border-left-color: #59698f;
}

.browser-tabs > li:nth-child(1),
.browser-tabs > li:nth-child(1)::before,
.browser-tabs > li:nth-child(1)::after {
z-index: 100;
}
.browser-tabs > li:nth-child(1) > a,
.browser-tabs > li:nth-child(1) > a::before,
.browser-tabs > li:nth-child(1) > a::after {
z-index: 120;
}
.browser-tabs > li:nth-child(2),
.browser-tabs > li:nth-child(2)::before,
.browser-tabs > li:nth-child(2)::after {
z-index: 200;
}
.browser-tabs > li:nth-child(2) > a,
.browser-tabs > li:nth-child(2) > a::before,
.browser-tabs > li:nth-child(2) > a::after {
z-index: 220;
}
.browser-tabs > li:nth-child(3),
.browser-tabs > li:nth-child(3)::before,
.browser-tabs > li:nth-child(3)::after {
z-index: 300;
}
.browser-tabs > li:nth-child(3) > a,
.browser-tabs > li:nth-child(3) > a::before,
.browser-tabs > li:nth-child(3) > a::after {
z-index: 320;
}
.browser-tabs > li:nth-child(4),
.browser-tabs > li:nth-child(4)::before,
.browser-tabs > li:nth-child(4)::after {
z-index: 400;
}
.browser-tabs > li:nth-child(4) > a,
.browser-tabs > li:nth-child(4) > a::before,
.browser-tabs > li:nth-child(4) > a::after {
z-index: 420;
}
.browser-tabs > li:nth-child(5),
.browser-tabs > li:nth-child(5)::before,
.browser-tabs > li:nth-child(5)::after {
z-index: 500;
}
.browser-tabs > li:nth-child(5) > a,
.browser-tabs > li:nth-child(5) > a::before,
.browser-tabs > li:nth-child(5) > a::after {
z-index: 520;
}
.browser-tabs > li:nth-child(6),
.browser-tabs > li:nth-child(6)::before,
.browser-tabs > li:nth-child(6)::after {
z-index: 600;
}
.browser-tabs > li:nth-child(6) > a,
.browser-tabs > li:nth-child(6) > a::before,
.browser-tabs > li:nth-child(6) > a::after {
z-index: 620;
}
.browser-tabs > li.active,
.browser-tabs > li.active::before,
.browser-tabs > li.active > a::before,
.browser-tabs > li.active::after,
.browser-tabs > li.active > a::after {
z-index: 1000 !important;
}