利用transform skewX製做平行四邊形導航菜單

平行四邊形實際上是矩形的超集：它的各條邊是兩兩平行的，但各個角則不必定都是直角。在視覺設計中，平行四邊形每每能夠傳達出一種動感。
讓咱們試着用 CSS 建立一個按鈕狀的平行四邊形連接。咱們的起點就是一個普通的塊狀按鈕，輔以一些簡單的樣式，而後，咱們能夠經過 skew() 的變形屬性來對這個矩形進行斜向拉伸：

transform: skewX(-45deg);

可是，這致使它的內容也發生了斜向變形，這很很差看，並且難讀。有沒有辦法只讓容器的形狀傾斜，而保持其內容不變呢？

不少人會想到嵌套元素方案，那麼咱們能夠對內容再應用一次反向的 skew() 變形，從而抵消容器的變形效果，最終產生咱們所指望的結果。不幸的是，這意味着咱們將不得不使用一層額外的 HTML 元素來包裹內容，好比用一個 span：

<a href="www.w3cbest.com" class="button">
 <span>www.w3cbest.com</span>
</a>

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

咱們能夠看到，這個方法的表現很不錯，但它也意味着咱們不得不添加額外的 HTML 元素。若是結構層的變動是不容許的，或者你但願嚴格保持結構層的純淨度，別擔憂，咱們還有一個純 CSS 的解決方案。

僞元素方案

另外一種思路是把全部樣式（背景、邊框等）應用到僞元素上，而後再對僞元素進行變形。由於咱們的內容並非包含在僞元素裏的，因此內容並不會受到變形的影響。下面來看看這個技巧可否獲得與前面相同的連接樣式。

咱們但願僞元素保持良好的靈活性，能夠自動繼承其宿主元素的尺寸，甚至當宿主元素的尺寸是由其內容來決定時仍然如此。一個簡單的辦法是給宿主元素應用 position: relative 樣式，併爲僞元素設置 position:absolute，而後再把全部偏移量設置爲零，以便讓它在水平和垂直方向上都被拉伸至宿主元素的尺寸。代碼看起來是這樣的：

.button {
 position: relative;
 /* 其餘的文字顏色、內邊距等樣式…… */
}
.button::before {
 content: '';
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
}

此時，用僞元素生成的方塊是重疊在內容之上的，一旦給它設置背景，就會遮住內容。爲了修復這個問題，咱們能夠給僞元素設置z-index: -1 樣式，這樣它的堆疊層次就會被推到宿主元素以後。如今咱們要作的最後一步，就是盡情地對它設置變形樣式，並享受美好的結果。最終版的代碼以下所示，它產生的視覺效果跟前文所述技巧是徹底一致的：

.button {
 position: relative;
 /* 其餘的文字顏色、內邊距等樣式…… */
}
.button::before {
 content: ''; /* 用僞元素來生成一個矩形 */
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
 z-index: -1;
 background: #58a;
 transform: skew(45deg);
}

這個技巧不只對 skew() 變形來講頗有用，還適用於其餘任何變形樣式，當咱們想變形一個元素而不想變形它的內容時就能夠用到它。舉個例子，咱們把這個技巧針對 rotate() 變形樣式稍稍調整一下，再用到一個正方形元素上，就能夠很容易地獲得一個菱形。

這個技巧的關鍵在於，咱們利用僞元素以及定位屬性產生了一個方塊，而後對僞元素設置樣式，並將其放置在其宿主元素的下層。這種思路一樣能夠運用在其餘場景中，從而獲得各類各樣的效果。

更多精彩