梯形標簽

原文出處：http://www.w3cplus.com/blog/1658.html

問題

梯形應用得比平行四邊形更普遍：只有兩條邊是平行的。另外兩條可以是任何角度。以前，它們都是CSS中很難創(chuàng)建的形狀，盡管它們特別常用，特別是對于標簽。作者要么是通過精心設計的背景圖像來模擬它們，要么是一個矩形旁邊帶兩個三角形來創(chuàng)建，或者是通過邊框來偽造一下。

圖注：通過偽元素邊框偽造的梯形（為清楚起見，用較暗的藍色表示偽元素）

盡管這種技術可以節(jié)省我們花費在圖像上的額外的HTTP請求，也可以非常簡單地調(diào)整寬度，但還是不理想。這既浪費了可用的偽元素，在樣式上也非常不靈活。比如，要添加一個邊框，一個背景紋理，或一些標簽周圍的東西的時候就悲劇了(＞﹏＜)。

Cloud9 IDE每個打開的文檔都有梯形的標簽

csstricks.com早期的梯形便簽，盡管只傾斜了一個方向

因為幾乎所有用于梯形設計的技術都非?；靵y甚至難以維護，我們在Web上看到的大多不是傾斜的，盡管現(xiàn)實的標簽是這樣的。是否有一個完整的靈活的方式來創(chuàng)建梯形標簽呢？

解決方案

是否存在這樣的可以創(chuàng)建梯形的2D變換的組合，我們只需要應用平行四邊形中的解決方案稍微轉(zhuǎn)變一下，就可以完成了?？上?，事情并不是這么簡單。

想象在一個物理的三維世界里旋轉(zhuǎn)一個矩形。我們看到的二維圖像通常是一個梯形，因為角度問題！所以，我們可以通過使用一個3D旋轉(zhuǎn)來在CSS中模擬這個效果：

transform: perspective(.5em) rotateX(5deg);

圖注：通過3D旋轉(zhuǎn)創(chuàng)建一個梯形。上邊：變換前；下邊：變換后

你可以在上圖中看到它創(chuàng)建出的梯形。當然，因為我們給一整個元素都應用了3D變換，文本也失真了。3D變換不能像2D變換那樣，將內(nèi)部文本的變換抵消（因為2D可以通過一個相反方向的變換來抵消變換）。從技術上將內(nèi)部元素的變換取消是可行的，但是非常復雜。因此，唯一實用的方式就是利用3D變換來創(chuàng)建一個梯形，把這種變換應用到偽元素上，類似于平行四邊形中的方法：

.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變換，這樣我們的文本就不會受到影響

如上圖所示，這可以創(chuàng)建出一個基本的梯形。雖然還有一個問題，當我們在應用的變換沒有設置transform-origin，元素會圍繞其中心旋轉(zhuǎn)。因此，我們屏幕上的這個2D的投影會因為很多因素改變，如下圖所示：

圖注：我們的梯形覆蓋在其預變換的版本上，以突出其指標的改變

當寬度增加時，它會向上移動，在高度上稍微有點變小等，這使得它很難設計。

為了讓這個指標更可控，我們指定了transform-origin: bottom;，這樣在旋轉(zhuǎn)的時候它的基本還是固定的。你可以在下圖中看到區(qū)別。

圖注：我們覆蓋在預變換版本上的梯形，當使用transform-origin: bottom;時將尺寸變化高亮

現(xiàn)在它更可預見一些：只有高度減少了。但是，高度的減少是非常清晰的，因為整個元素都旋轉(zhuǎn)到遠離觀察者了，而在此之前，它有一半在屏幕之上，一半在屏幕之下，這樣整個元素在三維空間里離觀察者更近一些。為了解決這個問題，我們可能會想給它應用額外的頂部內(nèi)邊距。但是，瀏覽器中的顯示結果還是非常糟糕，因為沒有支持3D變換（如下圖所示）。

圖注：使用額外的padding解決問題導致了一個非常奇怪的降級

相反，我們可以通過一個變換來增加它的尺寸，這樣當不支持3D變換的時候，整個內(nèi)容都會失效。經(jīng)過幾個試驗，我們發(fā)現(xiàn)約130%的垂直縮放（如scaleY()變換）足以彌補失去的空間：

transform: scaleY(1.3) perspective(.5em) rotateX(5deg);
transform-origin: bottom;

圖注：使用scale()來彌補失去的高度，提供了一個非常好的降級（上方的圖）

你可以在上圖中看到結果和降級。這里，結果只是在視覺上等同于前面提到的基于border的技術，只是這里的語法更簡潔。但是，當你開始給標簽應用一些樣式的時候，這種技術的優(yōu)勢開始出現(xiàn)。例如，看看下面的代碼：

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;
}

上面代碼的效果如下圖所示：

圖注：這種技術的優(yōu)勢在于它樣式方面的靈活性

如你所見，我們已經(jīng)應用了背景、邊框、圓角，還有盒陰影——它們都是可行的，沒有任何問題！此外，只需要把transform-origin的值改為bottom?left?或?bottom?right，我們就可以得到向左或向右傾斜的標簽，分別！

圖注：通過改變transform-origin的值生成的斜標簽

盡管它有這么多的優(yōu)點，這種技術還是不夠完美。它有一個非常重大的缺陷：側邊的角度取決于元素的寬度。因此，當處理不同的內(nèi)容時，用相同的角度來得到梯形是很棘手的。但是，對于寬度變化小的元素，它還是非常ok的，比如導航菜單。在這些情況中，差異是難以察覺的。