> 原文出處：http://www.w3cplus.com/css3/css-secrets/parallelograms.html
## 問題
平行四邊形是矩形的一個超集：它的邊是平行的，但是角不一定是直角。
*圖注:一個平行四邊形*
在視覺設計，它們往往可以使設計顯得更具活力，傳達運動感。
*圖注：eb設計中的平行四邊形（design by Martina Pitakova）*
我們嘗試用CSS創建按鈕樣式的鏈接。從普通的扁平按鈕開始，帶一些簡單的樣式，如圖下圖所示:
然后，我們應用`skew()`變換創建出傾斜的矩形，如下：
~~~
transform: skewX(-45deg);
~~~
但是，這也會導致平行四邊形中的內容被傾斜，這使得它看起來很丑而且沒有可讀性。
*圖注：傾斜后的按鈕，文本變得難以閱讀*
有什么辦法可以只傾斜外邊的形狀容器，而不傾斜里邊的內容嗎？
## 嵌套元素的解決方案
我們可以給內容應用一個相反的`skew()`變換，把外邊的變換抵消，這樣就可以得到我們想要的結果。但是，這也意味著我們必須使用額外的HTML元素來包裹內容，如一個`div`：
~~~
<a href="#yolo" class="button">
<div>Click me</div>
</a>
.button { transform: skewX(-45deg); }
.button > div { transform: skewX(45deg); }
~~~
> 如果你是給默認內聯的元素應用這個效果，記得把它的`display`屬性設置為`inline-block`或`block`，否則應用的變換不會生效。內部元素也一樣。
正如下圖的效果：
如如你看到，它運行沒有問題，但是我們使用了一個額外的HTML元素。如果修改標簽不是一個可選的方案，或者你真的希望保持標簽純度，別擔心，這里還有一個純CSS的解決方案。
## 偽元素解決方案
另一個方案是把所有的樣式應用在偽元素上（背景、邊框等等），然后為其應用變換。因為我們的內容不是被包裹在偽元素中的，它不會被變換影響。我們嘗試使用這種技術給一個鏈接添加樣式，跟前一節一樣的方法。
我們需要讓偽元素保持靈活性，并自動繼承父元素的尺寸，即使它們的大小由內容決定。一個簡單的方法時是父元素應用`position: relative`，然后給生成的元素應用`position: absolute`，然后把所有的偏移量都設置為`0`，這樣它的水平和垂直方向都會繼承父元素的大小。代碼如下：
~~~
.button {
position: relative;
/* text color, paddings, etc. */
}
.button::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}
~~~
此時，生成的盒子是懸浮在內容上邊的，一旦給它應用了背景，它將會覆蓋住內容:
*圖注：我們的偽元素當前是懸浮在內容上邊的，所以應用`background: #58a`來覆蓋*
我們可以給偽元素應用一個`z-index: -1`，這樣它就會移動到父元素下方了。
現在，終于可以給我們的主要元素應用變換，然后查看結果了。最后的代碼如下，生成的效果和前面的方案生成的效果完全一樣：
~~~
.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);
}
~~~
這些技術不僅對`skew()`變換有效。它們還可以結合其它變換使用，這樣既可以改變元素的形狀，但又不會對它的內容造成影響。例如，給一個方形元素使用`rotate()`變換，可以很容易地生成一個鉆石（ 菱形）形狀。
還有，使用偽元素和定位來生成一個盒子，并添加樣式，然后放置在父元素之下的方法，在很多其它的不同類型的效果實例中都可以使用，如：
* 一種常見的解決IE8中多背景的方法，由[Nicolas Gallagher](http://nicolasgallagher.com/multiple-backgrounds-and-borders-with-css2/)提供。
* 可以解決像[第二章第四節中的“Inner rounding”這樣的效果](http://www.w3cplus.com/css3/css-secrets/inner-rounding.html)，能猜到是怎么實現的嗎？
* 可以用來單獨給背景應用像`opacity`這樣的屬性，由[Nicolas Gallagher](http://nicolasgallagher.com/css-background-image-hacks/)首創。
* 可以用來模擬多邊框，以一種更靈活的方法。這樣我們不可以使用[第二章第二節的“Multiple borders”的技術](http://www.w3cplus.com/css3/css-secrets/multiple-borders.html)。例如，當我們需要多個虛線邊框，或多個用空格分隔的邊框和透明度時。
