平行四邊形

原文出處：http://www.w3cplus.com/css3/css-secrets/parallelograms.html

問題

平行四邊形是矩形的一個超集：它的邊是平行的，但是角不一定是直角。

圖注:一個平行四邊形

在視覺設(shè)計，它們往往可以使設(shè)計顯得更具活力，傳達運動感。

圖注：eb設(shè)計中的平行四邊形（design by Martina Pitakova）

我們嘗試用CSS創(chuàng)建按鈕樣式的鏈接。從普通的扁平按鈕開始，帶一些簡單的樣式，如圖下圖所示:

然后，我們應(yīng)用skew()變換創(chuàng)建出傾斜的矩形，如下：

transform: skewX(-45deg);

但是，這也會導(dǎo)致平行四邊形中的內(nèi)容被傾斜，這使得它看起來很丑而且沒有可讀性。

圖注：傾斜后的按鈕，文本變得難以閱讀

有什么辦法可以只傾斜外邊的形狀容器，而不傾斜里邊的內(nèi)容嗎？

嵌套元素的解決方案

我們可以給內(nèi)容應(yīng)用一個相反的skew()變換，把外邊的變換抵消，這樣就可以得到我們想要的結(jié)果。但是，這也意味著我們必須使用額外的HTML元素來包裹內(nèi)容，如一個div：

<a href="#yolo" class="button">
    <div>Click me</div>
</a>

.button { transform: skewX(-45deg); }
.button > div { transform: skewX(45deg); }

如果你是給默認內(nèi)聯(lián)的元素應(yīng)用這個效果，記得把它的display屬性設(shè)置為inline-block或block，否則應(yīng)用的變換不會生效。內(nèi)部元素也一樣。

正如下圖的效果：

如如你看到，它運行沒有問題，但是我們使用了一個額外的HTML元素。如果修改標簽不是一個可選的方案，或者你真的希望保持標簽純度，別擔心，這里還有一個純CSS的解決方案。

偽元素解決方案

另一個方案是把所有的樣式應(yīng)用在偽元素上（背景、邊框等等），然后為其應(yīng)用變換。因為我們的內(nèi)容不是被包裹在偽元素中的，它不會被變換影響。我們嘗試使用這種技術(shù)給一個鏈接添加樣式，跟前一節(jié)一樣的方法。

我們需要讓偽元素保持靈活性，并自動繼承父元素的尺寸，即使它們的大小由內(nèi)容決定。一個簡單的方法時是父元素應(yīng)用position: relative，然后給生成的元素應(yīng)用position: absolute，然后把所有的偏移量都設(shè)置為0，這樣它的水平和垂直方向都會繼承父元素的大小。代碼如下：

.button {
    position: relative;
    /* text color, paddings, etc. */
}
.button::before {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
}

此時，生成的盒子是懸浮在內(nèi)容上邊的，一旦給它應(yīng)用了背景，它將會覆蓋住內(nèi)容:

圖注：我們的偽元素當前是懸浮在內(nèi)容上邊的，所以應(yīng)用background: #58a來覆蓋

我們可以給偽元素應(yīng)用一個z-index: -1，這樣它就會移動到父元素下方了。

現(xiàn)在，終于可以給我們的主要元素應(yīng)用變換，然后查看結(jié)果了。最后的代碼如下，生成的效果和前面的方案生成的效果完全一樣：

.button {
    position: relative;
    /* text color, paddings, etc. */
}
.button::before {
    content: ''; /* To generate the box */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: #58a;
    transform: skew(45deg);
}

這些技術(shù)不僅對skew()變換有效。它們還可以結(jié)合其它變換使用，這樣既可以改變元素的形狀，但又不會對它的內(nèi)容造成影響。例如，給一個方形元素使用rotate()變換，可以很容易地生成一個鉆石（ 菱形）形狀。

還有，使用偽元素和定位來生成一個盒子，并添加樣式，然后放置在父元素之下的方法，在很多其它的不同類型的效果實例中都可以使用，如：

• 一種常見的解決IE8中多背景的方法，由Nicolas Gallagher提供。
• 可以解決像第二章第四節(jié)中的“Inner rounding”這樣的效果，能猜到是怎么實現(xiàn)的嗎？
• 可以用來單獨給背景應(yīng)用像opacity這樣的屬性，由Nicolas Gallagher首創(chuàng)。
• 可以用來模擬多邊框，以一種更靈活的方法。這樣我們不可以使用第二章第二節(jié)的“Multiple borders”的技術(shù)。例如，當我們需要多個虛線邊框，或多個用空格分隔的邊框和透明度時。