纯样式 HTML+ CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tabs {
display: flex;
width: 200px;
height: 50px;
}
.tabs .tab-item {
background: rgb(143, 171, 236);
border: 1px solid rgb(255, 0, 0);
border-left: none;
border-right: none;
flex: 1;
position: relative;
}
.tabs .tab-item:not(:last-child)::after {
content: "";
width: 26px;
height: 26px;
position: absolute;
background: inherit;
border-top: 1px solid rgb(255, 0, 0);
border-right: 1px solid rgb(255, 0, 0);
transform: rotate(45deg) skew(15deg, 15deg);
right: -14px;
top: 10px;
z-index: 9;
}
.tabs .tab-item:not(:first-child)::before {
content: "";
width: 26px;
height: 26px;
position: absolute;
border-top: 1px solid rgb(255, 0, 0);
border-right: 1px solid rgb(255, 0, 0);
transform: rotate(45deg) skew(15deg, 15deg);
left: -13px;
top: 10px;
z-index: 10;
}
.tabs>.tab-item:first-child {
border-left: 1px solid rgb(255, 0, 0);
}
.tabs>.tab-item:last-child {
border-right: 1px solid rgb(255, 0, 0);
}
.tabs .tab-item:hover {
background-color: rgb(149, 0, 255);
border-color: aqua;
}
.tabs .tab-item:hover::after {
background-color: rgb(149, 0, 255);
border-color: aqua;
z-index: 11;
}
.tabs .tab-item:hover::before {
border-top: 1px solid aqua;
border-right: 1px solid aqua;
}
.tabs .tab-item::before {
background-color: transparent;
}
</style>
</head>
<body>
<div class="tabs">
<div class="tab-item"></div>
<div class="tab-item"></div>
<div class="tab-item"></div>
</div>
</body>
</html>
使用脚本 JS+HTML+CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.tabs {
display: flex;
width: 200px;
height: 50px;
}
.tabs .tab-item {
background: rgb(143, 171, 236);
border: 1px solid rgb(255, 0, 0);
border-left: none;
border-right: none;
flex: 1;
position: relative;
}
.tabs .tab-item:not(:last-child)::after {
content: "";
width: 26px;
height: 26px;
position: absolute;
background: inherit;
border-top: 1px solid rgb(255, 0, 0);
border-right: 1px solid rgb(255, 0, 0);
transform: rotate(45deg) skew(15deg, 15deg);
right: -14px;
top: 10px;
z-index: 9;
}
.tabs>.tab-item:first-child {
border-left: 1px solid rgb(255, 0, 0);
}
.tabs>.tab-item:last-child {
border-right: 1px solid rgb(255, 0, 0);
}
.tabs .tab-item:hover {
background-color: bisque;
border-color: aqua;
}
.tabs .tab-item:hover::after {
border-color: aqua;
}
.hover-previous::after {
border-color: aqua !important;
}
</style>
</head>
<body>
<div class="tabs" id="tabs">
<div class="tab-item" data-index="0" ></div>
<div class="tab-item" data-index="1" ></div>
<div class="tab-item" data-index="2" ></div>
</div>
<script>
var tabsDom = document.getElementById("tabs")
tabsDom.addEventListener('mouseover', function(event) {
var cInd = Number(event.target.dataset.index)
var preInd = cInd - 1
var tabItems = document.getElementsByClassName('tab-item')
for(var i =0; i< tabItems.length; i++){
tabItems[i].className = "tab-item"
}
if(preInd >= 0){
tabItems[preInd].className = "tab-item hover-previous"
}
});
tabsDom.addEventListener('mouseout', function(event) {
var tabItems = document.getElementsByClassName('tab-item')
for(var i =0; i< tabItems.length; i++){
tabItems[i].className = "tab-item"
}
});
</script>
</body>
</html>