《CSS揭祕》：梯形標籤頁

梯形標籤頁

一直以來，在CSS裏都沒有簡單的方式生成梯形標籤頁。常見的方案是使用背景圖片或者僞元素。可是這兩種方案使用起來不夠靈活。好比標籤大小改變，增長紋理背景時候，這兩種方案就很難維護。

背景圖片

本方案就是對標籤頁設置梯形的背景圖片。
background: url(...)
缺點是若是梯形標籤的寬度、高度、背景等有變化，就得從新切圖。基本不能重用

僞元素

僞元素方案就是對元素設置before和after僞元素。對僞元素設置旋轉等操做。

:before {
  transform: skewx(30deg);
}
:before {
  transform: skewx(-30deg);
}

缺點是若是要給梯形設置邊框等樣式，就會比較困難。

3D旋轉

咱們想象，一個平面的矩形，垂直於平面進行旋轉，投射在2D平面內就是一個梯形。
transform: perspective(.5em) rotateX(5deg)
另外，因爲默認是已矩形中軸爲軸旋轉，這樣的到的梯形的寬度會增長，高度會減小，而且位置會下移。這樣就須要爲其指定旋轉軸。同時設置Y軸的縮放來使其高度儘可能不發生變化。

transform: scale(1.1, 1.3) perspective(.5em) rotateX(5deg);
transform-origin: bottom;

即便是這樣，因爲斜邊的角度依賴於元素的寬度，若是標籤不是等寬，就會形成一些差別。可是標籤頁通常用於導航，這種方法能夠知足大部分場景。