<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta
http-equiv="X-UA-Compatible"
content="IE=edge"
/>
<meta
name="viewport"
content="width=device-width, initial-scale=1.0"
/>
<title>Document</title>
<style>
body {
margin: 50px;
}
ul,
li {
list-style-type: none;
}
.flex-box {
display: flex;
}
.flex-box-auto {
flex: 1;
position: relative;
}
/* 竖版 */
.vertical .tabItem {
width: 28px;
position: relative;
background: #d9e8f6;
font-size: 14px;
color: #3285ff;
margin-bottom: 40px;
}
.vertical .tabItem span {
position: relative;
width: 14px;
display: block;
line-height: 20px;
margin: 0 auto;
z-index: 9;
word-break: break-all;
}
.vertical .tabItem::before,
.vertical .tabItem::after {
content: '';
width: 28px;
height: 30px;
background: #d9e8f6;
position: absolute;
}
.vertical .tabItem::before {
left: 0;
transform: skewY(-8deg);
border-radius: 10px 0 0 0;
top: -16px;
}
.vertical .tabItem::after {
left: 0;
transform: skewY(8deg);
border-radius: 0 0 0 10px;
bottom: -16px;
}
.vertical .tabItem:hover,
.vertical .tabItem.active {
cursor: pointer;
background: #3285ff;
color: #fff;
}
.vertical .tabItem:hover::before,
.vertical .tabItem:hover::after,
.vertical .tabItem.active::before,
.vertical .tabItem.active::after {
background: #3285ff;
}
/* 横版 */
.horizontal {
display: flex;
align-items: center;
}
.horizontal .tabItem {
height: 28px;
position: relative;
background: #d9e8f6;
font-size: 14px;
color: #3285ff;
margin-right: 45px;
}
.horizontal .tabItem span {
padding: 0 20px;
position: relative;
display: block;
line-height: 28px;
margin: 0 auto;
z-index: 9;
word-break: break-all;
}
.horizontal .tabItem::before,
.horizontal .tabItem::after {
content: '';
width: 28px;
height: 28px;
background: #d9e8f6;
position: absolute;
}
.horizontal .tabItem::before {
top: 0;
transform: skewX(-8deg);
border-radius: 10px 0 0 0;
left: -16px;
}
.horizontal .tabItem::after {
top: 0;
transform: skewX(8deg);
border-radius: 0 10px 0 0;
right: -16px;
}
.horizontal .tabItem:hover,
.horizontal .tabItem.active {
cursor: pointer;
background: #3285ff;
color: #fff;
}
.horizontal .tabItem:hover::before,
.horizontal .tabItem:hover::after,
.horizontal .tabItem.active::before,
.horizontal .tabItem.active::after {
background: #3285ff;
}
/* 箭头面包屑 */
.page-breadcrumb {
margin-left: -16px;
display: flex;
align-items: center;
height: 32px;
line-height: 32px;
}
.page-breadcrumb .item-breadcrumb {
background: #9e9e9e;
color: #fff;
font-size: 14px;
position: relative;
}
.page-breadcrumb .item-breadcrumb::after,
.page-breadcrumb .item-breadcrumb span::after {
content: '';
border-style: dashed dashed dashed solid;
border-color: transparent transparent transparent #9e9e9e;
border-width: 16px 0 16px 25px;
width: 0;
height: 0;
display: block;
position: absolute;
right: -25px;
top: 0;
z-index: 9;
}
.page-breadcrumb .item-breadcrumb span {
padding: 0 10px 0 35px;
display: block;
}
.page-breadcrumb .item-breadcrumb span::after {
border-color: transparent transparent transparent #fff;
right: -26px;
}
.page-breadcrumb .item-breadcrumb:first-child span {
padding-left: 20px;
}
.page-breadcrumb .item-breadcrumb.active {
background: #3285ff;
cursor: pointer;
}
.page-breadcrumb .item-breadcrumb.active::after {
border-color: transparent transparent transparent #3285ff;
}
</style>
</head>
<body>
<div class="flex-box">
<div class="flex-box-auto">
<h1>竖版tab选项卡</h1>
<ul class="vertical">
<li class="tabItem active"><span>测试</span></li>
<li class="tabItem"><span>测试测试测试</span></li>
<li class="tabItem"><span>测试</span></li>
</ul>
</div>
<div class="flex-box-auto">
<h1>横版tab选项卡</h1>
<ul class="horizontal">
<li class="tabItem active"><span>测试测试测试</span></li>
<li class="tabItem"><span>测试</span></li>
<li class="tabItem"><span>测试</span></li>
</ul>
<div style="margin-top: 50px">
<h1>箭头面包屑</h1>
<div class="page-breadcrumb">
<div class="item-breadcrumb"><span>测试测试测试</span></div>
<div class="item-breadcrumb active"><span>测试</span></div>
<div class="item-breadcrumb"><span>测试测试</span></div>
</div>
</div>
</div>
</div>
</body>
</html>
