效果图展示
方案一
首先是自己想到一种方案：
-
每个div都附带两个after和before伪类，宽高为0，border撑开
-
伪类的color默认inherit父类color，所以选中时改变父类color就可以改变颜色
-
给伪类设置层级，让层级小于每个div，但是比div的父容器大，避免颜色被覆盖
-
默认不设置div的position，因为都设置了，伪类的before或者after在找定位时指不定靠近哪个（因为挨的一样近）。。。可能某个就不展示了（踩了坑）
-
点击当前项，改变div颜色并且改变position为relative，其他的position全设为static,初始化颜色。
方案二
这种方案是我搜的一种，将伪类做边，通过阴影和渐变填充，可以解决给标签设置标签的效果，我就不造轮子了。 直接上链接:css-tricks.com/better-tabs…
代码部分
HTML
<div class="content">
<div class="item">
<span>开始边界 </span>
</div>
<div class="item">
<span>1111</span>
</div>
<div class="item">
<span>2222</span>
</div>
<div class="item">
<span>3333</span>
</div>
<div class="item">
<span>444</span>
</div>
<div class="item">
<span>结束边界 </span>
</div>
</div>
CSS
<style type="text/css">
body,html{
margin: 0;
padding: 0;
}
.content {
background-color: #CCCCCC;
display: flex;
width: 800px;
height: 60px;
padding-top: 10px;
overflow: hidden;
position:absolute ;
z-index: -99;
}
.item {
width: 150px;
height: 60px;
border-radius: 20px;
color: #CCCCCC;
text-align: center;
line-height: 60px;
background: #CCCCCC;
cursor: pointer;
}
.item:first-child{
border-bottom-left-radius: 0;
}
.item:last-child {
border-bottom-right-radius: 0;
}
.item span{
color: #000000;
}
.item::after,.item::before {
width: 0;
height:0 ;
content: '';
position: absolute;
z-index: -9;
}
.item::before {
top: 40px;
right: -20px;
border-top: 20px solid;
border-left: 40px solid;
}
.item::after {
top: 40px;
left: -20px;
border-top: 20px solid;
border-left: 40px solid;
z-index: -9;
}
</style>
javascript
<script type="text/javascript">
const itemList = document.getElementsByClassName('item');
for(let i = 1, len = itemList.length; i < len-1; i++) {
itemList[i].onclick=function() {
let j = 0;
while(j < itemList.length){
itemList[j].style.cssText += 'background: #CCCCCC; position: static;';
j++
}
this.style.cssText += 'background: #ffffff; color: #ffffff; position:relative;';
}
}
</script>
全部代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
body,html{
margin: 0;
padding: 0;
}
.content {
background-color: #CCCCCC;
display: flex;
width: 800px;
height: 60px;
padding-top: 10px;
overflow: hidden;
position:absolute ;
z-index: -99;
}
.item {
width: 150px;
height: 60px;
border-radius: 20px;
color: #CCCCCC;
text-align: center;
line-height: 60px;
background: #CCCCCC;
cursor: pointer;
}
.item:first-child{
border-bottom-left-radius: 0;
}
.item:last-child {
border-bottom-right-radius: 0;
}
.item span{
color: #000000;
}
.item::after,.item::before {
width: 0;
height:0 ;
content: '';
position: absolute;
z-index: -9;
}
.item::before {
top: 40px;
right: -20px;
border-top: 20px solid;
border-left: 40px solid;
}
.item::after {
top: 40px;
left: -20px;
border-top: 20px solid;
border-left: 40px solid;
z-index: -9;
}
</style>
</head>
<body>
<div class="content">
<div class="item">
<span>开始边界 </span>
</div>
<div class="item">
<span>1111</span>
</div>
<div class="item">
<span>2222</span>
</div>
<div class="item">
<span>3333</span>
</div>
<div class="item">
<span>444</span>
</div>
<div class="item">
<span>结束边界 </span>
</div>
</div>
<script type="text/javascript">
const itemList = document.getElementsByClassName('item');
for(let i = 1, len = itemList.length; i < len-1; i++) {
itemList[i].onclick=function() {
let j = 0;
while(j < itemList.length){
itemList[j].style.cssText += 'background: #CCCCCC; position: static;';
j++
}
this.style.cssText += 'background: #ffffff; color: #ffffff; position:relative;';
}
}
</script>
</body>
</html>
