> 原文出處：http://www.w3cplus.com/blog/1658.html
## 問題
梯形應用得比[平行四邊形](http://www.w3cplus.com/css3/css-secrets/parallelograms.html)更普遍：只有兩條邊是平行的。另外兩條可以是任何角度。以前，它們都是CSS中很難創建的形狀，盡管它們特別常用，特別是對于標簽。作者要么是通過精心設計的背景圖像來模擬它們，要么是一個矩形旁邊帶兩個三角形來創建，或者是通過邊框來偽造一下。
*圖注：通過偽元素邊框偽造的梯形（為清楚起見，用較暗的藍色表示偽元素）*
盡管這種技術可以節省我們花費在圖像上的額外的HTTP請求，也可以非常簡單地調整寬度，但還是不理想。這既浪費了可用的偽元素，在樣式上也非常不靈活。比如，要添加一個邊框，一個背景紋理，或一些標簽周圍的東西的時候就悲劇了(＞﹏＜)。
[](https://c9.io/)
> [Cloud9 IDE](https://c9.io/)每個打開的文檔都有梯形的標簽
[](https://css-tricks.com/)
> [csstricks.com](https://css-tricks.com/)早期的梯形便簽，盡管只傾斜了一個方向
因為幾乎所有用于梯形設計的技術都非常混亂甚至難以維護，我們在Web上看到的大多不是傾斜的，盡管現實的標簽是這樣的。是否有一個完整的靈活的方式來創建梯形標簽呢？
## 解決方案
是否存在這樣的可以創建梯形的2D變換的組合，我們只需要應用[平行四邊形](http://www.w3cplus.com/css3/css-secrets/parallelograms.html)中的解決方案稍微轉變一下，就可以完成了。可惜，事情并不是這么簡單。
想象在一個物理的三維世界里旋轉一個矩形。我們看到的二維圖像通常是一個梯形，因為角度問題！所以，我們可以通過使用一個3D旋轉來在CSS中模擬這個效果：
~~~
transform: perspective(.5em) rotateX(5deg);
~~~
*圖注：通過3D旋轉創建一個梯形。上邊：變換前；下邊：變換后*
你可以在上圖中看到它創建出的梯形。當然，因為我們給一整個元素都應用了3D變換，文本也失真了。3D變換不能像2D變換那樣，將內部文本的變換抵消（因為2D可以通過一個相反方向的變換來抵消變換）。從技術上將內部元素的變換取消是可行的，但是非常復雜。因此，唯一實用的方式就是利用3D變換來創建一個梯形，把這種變換應用到偽元素上，類似于[**平行四邊形**](http://www.w3cplus.com/css3/css-secrets/parallelograms.html)中的方法：
~~~
.tab {
position: relative;
display: inline-block;
padding: .5em 1em .35em;
color: white;
}
.tab::before {
content: ''; /* To generate the box */
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #58a;
transform: perspective(.5em) rotateX(5deg);
}
~~~
*圖注：給偽元素生成的盒子應用3D變換，這樣我們的文本就不會受到影響*
如上圖所示，這可以創建出一個基本的梯形。雖然還有一個問題，當我們在應用的變換沒有設置`transform-origin`，元素會圍繞其中心旋轉。因此，我們屏幕上的這個2D的投影會因為很多因素改變，如下圖所示：
*圖注：我們的梯形覆蓋在其預變換的版本上，以突出其指標的改變*
當寬度增加時，它會向上移動，在高度上稍微有點變小等，這使得它很難設計。
為了讓這個指標更可控，我們指定了`transform-origin: bottom;`，這樣在旋轉的時候它的基本還是固定的。你可以在下圖中看到區別。
*圖注：我們覆蓋在預變換版本上的梯形，當使用`transform-origin: bottom;`時將尺寸變化高亮*
現在它更可預見一些：只有高度減少了。但是，高度的減少是非常清晰的，因為整個元素都旋轉到遠離觀察者了，而在此之前，它有一半在屏幕之上，一半在屏幕之下，這樣整個元素在三維空間里離觀察者更近一些。為了解決這個問題，我們可能會想給它應用額外的頂部內邊距。但是，瀏覽器中的顯示結果還是非常糟糕，因為沒有支持3D變換（如下圖所示）。
*圖注：使用額外的`padding`解決問題導致了一個非常奇怪的降級*
相反，我們可以通過一個變換來增加它的尺寸，這樣當不支持3D變換的時候，整個內容都會失效。經過幾個試驗，我們發現約`130%`的垂直縮放（如`scaleY()`變換）足以彌補失去的空間：
~~~
transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
transform-origin: bottom;
~~~
*圖注：使用`scale()`來彌補失去的高度，提供了一個非常好的降級（上方的圖）*
你可以在上圖中看到結果和降級。這里，結果只是在視覺上等同于前面提到的基于`border`的技術，只是這里的語法更簡潔。但是，當你開始給標簽應用一些樣式的時候，這種技術的優勢開始出現。例如，看看下面的代碼：
~~~
nav > a {
position: relative;
display: inline-block;
padding: .3em 1em 0;
}
nav > a::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
z-index: -1;
background: #ccc;
background-image: linear-gradient(
hsla(0,0%,100%,.6),
hsla(0,0%,100%,0));
border: 1px solid rgba(0,0,0,.4);
border-bottom: none;
border-radius: .5em .5em 0 0;
box-shadow: 0 .15em white inset;
transform: perspective(.5em) rotateX(5deg);
transform-origin: bottom;
}
~~~
上面代碼的效果如下圖所示：
*圖注：這種技術的優勢在于它樣式方面的靈活性*
如你所見，我們已經應用了背景、邊框、圓角，還有盒陰影——它們都是可行的，沒有任何問題！此外，只需要把`transform-origin`的值改為`bottom`?`left`?或?`bottom`?`right`，我們就可以得到向左或向右傾斜的標簽，分別！
*圖注：通過改變`transform-origin`的值生成的斜標簽*
盡管它有這么多的優點，這種技術還是不夠完美。它有一個非常重大的缺陷：側邊的角度取決于元素的寬度。因此，當處理不同的內容時，用相同的角度來得到梯形是很棘手的。但是，對于寬度變化小的元素，它還是非常ok的，比如導航菜單。在這些情況中，差異是難以察覺的。
