利用css3中transform skewX怎么實現(xiàn)平行四邊形的導(dǎo)航菜單

利用css3中transform skewX怎么實現(xiàn)平行四邊形的導(dǎo)航菜單？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

平行四邊形其實是矩形的超集：它的各條邊是兩兩平行的，但各個角則不一定都是直角。在視覺設(shè)計中，平行四邊形往往可以傳達(dá)出一種動感。
讓我們試著用 CSS 創(chuàng)建一個按鈕狀的平行四邊形鏈接。我們的起點就是一個普通的塊狀按鈕，輔以一些簡單的樣式，然后，我們可以通過 skew() 的變形屬性來對這個矩形進(jìn)行斜向拉伸：

transform: skewX(-45deg);

但是，這導(dǎo)致它的內(nèi)容也發(fā)生了斜向變形，這很不好看，而且難讀。有沒有辦法只讓容器的形狀傾斜，而保持其內(nèi)容不變呢？

很多人會想到嵌套元素方案，那么我們可以對內(nèi)容再應(yīng)用一次反向的 skew() 變形，從而抵消容器的變形效果，最終產(chǎn)生我們所期望的結(jié)果。不幸的是，這意味著我們將不得不使用一層額外的 HTML 元素來包裹內(nèi)容，比如用一個 span：

<a href="www.php.cn" class="button">
 <span>www.php.cn</span>
</a>
.button { transform: skewX(-45deg); }
.button > span { transform: skewX(45deg); }

我們可以看到，這個方法的表現(xiàn)很不錯，但它也意味著我們不得不添加額外的 HTML 元素。如果結(jié)構(gòu)層的變更是不允許的，或者你希望嚴(yán)格保持結(jié)構(gòu)層的純凈度，別擔(dān)心，我們還有一個純 CSS 的解決方案。

偽元素方案

另一種思路是把所有樣式（背景、邊框等）應(yīng)用到偽元素上，然后再對偽元素進(jìn)行變形。因為我們的內(nèi)容并不是包含在偽元素里的，所以內(nèi)容并不會受到變形的影響。下面來看看這個技巧能否得到與前面相同的鏈接樣式。

我們希望偽元素保持良好的靈活性，可以自動繼承其宿主元素的尺寸，甚至當(dāng)宿主元素的尺寸是由其內(nèi)容來決定時仍然如此。一個簡單的辦法是給宿主元素應(yīng)用 position: relative 樣式，并為偽元素設(shè)置 position:absolute，然后再把所有偏移量設(shè)置為零，以便讓它在水平和垂直方向上都被拉伸至宿主元素的尺寸。代碼看起來是這樣的：

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

此時，用偽元素生成的方塊是重疊在內(nèi)容之上的，一旦給它設(shè)置背景，就會遮住內(nèi)容。為了修復(fù)這個問題，我們可以給偽元素設(shè)置z-index: -1 樣式，這樣它的堆疊層次就會被推到宿主元素之后?，F(xiàn)在我們要做的最后一步，就是盡情地對它設(shè)置變形樣式，并享受美好的結(jié)果。最終版的代碼如下所示，它產(chǎn)生的視覺效果跟前文所述技巧是完全一致的：

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

這個技巧不僅對 skew() 變形來說很有用，還適用于其他任何變形樣式，當(dāng)我們想變形一個元素而不想變形它的內(nèi)容時就可以用到它。舉個例子，我們把這個技巧針對 rotate() 變形樣式稍稍調(diào)整一下，再用到一個正方形元素上，就可以很容易地得到一個菱形。

這個技巧的關(guān)鍵在于，我們利用偽元素以及定位屬性產(chǎn)生了一個方塊，然后對偽元素設(shè)置樣式，并將其放置在其宿主元素的下層。這種思路同樣可以運用在其他場景中，從而得到各種各樣的效果。

感謝各位的閱讀！看完上述內(nèi)容，你們對利用css3中transform skewX怎么實現(xiàn)平行四邊形的導(dǎo)航菜單大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。