純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); }
如此，即可出現本文最開始的效果。