純css實現傾斜tab切換,並且加上兩邊圓角
阿新 • • 發佈:2018-12-09
前端開發過程中難免會遇到傾斜的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); }
如此,即可出現本文最開始的效果。