前端开发过程中难免会遇到倾斜的tab设计,并且两边要做成圆角效果,如下图:
我的想法:
1. 给每个tab项设置transform:skew(角度值)实现倾斜效果,但是,此时里边内容也会跟着倾斜,所以给内容单独加一个容器,给该容器重新设置偏转回去即可;
2. 两边的圆角,在tab项外边套一个div,给这个div设置border-radius,但是,因为此时这个父容器是被tab项撑开的,但是tab项左右两边是倾斜的,出现如下效果:
需要想办法把tab项的尖角去掉,怎么去掉呢?没错,overflow:hiddden;所以给父容器(content)加上,因为两边都需要盖住尖角(上图左上角和右下角),那么父容器的宽度就需要比tab项的宽度稍微少那么点,但是也不能少太多,不然圆角会有瑕疵,正好遮住最好(数值自行测试),并且需要把tab项整体(此时需要给tab再加一层父容器content-nav,在上文的父容器content之内)往左移动一点,正好显示出来为好。
项目代码:
<div class="content">
<div class="content-nav">
<div class="item">
<div class="item-word">测试tab111</div>
</div>
<div class="item">
<div class="item-word">测试tab222</div>
</div>
<div class="item">
<div class="item-word">测试tab333</div>
</div>
</div>
</div>
.content {
width: 550px;
background: #f00;
white-space: nowrap;
border-radius: 15px;
overflow: hidden;
}
.content-nav {
margin-left: -33px;
}
.item {
width: 200px;
height: 30px;
display: inline-block;
font-size: 24px;
text-align: center;
line-height: 30px;
background: linear-gradient(90deg, rgba(255, 163, 0, 1) 0%, rgba(249, 214, 45, 1) 100%);
transform: skew(30deg);
}
.item-word {
transform: skew(-30deg);
}
如此,即可出现本文最开始的效果。