怎么用css3中的transform skewX實現平行四邊形的導航菜單

本篇內容介紹了“怎么用css3中的transform skewX實現平行四邊形的導航菜單”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！

　　平行四邊形其實是矩形的超集：它的各條邊是兩兩平行的，但各個角則不一定都是直角。在視覺設計中，平行四邊形往往可以傳達出一種動感。

　　讓我們試著用CSS創建一個按鈕狀的平行四邊形鏈接。我們的起點就是一個普通的塊狀按鈕，輔以一些簡單的樣式，然后，我們可以通過skew()的變形屬性來對這個矩形進行斜向拉伸：

　　transform:skewX(-45deg);

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

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

　　<ahref="www.php.cn"class="button">

　　<span>www.php.cn</span>

　　</a>

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

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

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

　　偽元素方案

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

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

　　.button{

　　position:relative;

　　/*其他的文字顏色、內邊距等樣式&hellip;&hellip;*/

　　}

　　.button::before{

　　content:'';

　　position:absolute;

　　top:0;right:0;bottom:0;left:0;

　　}

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

　　.button{

　　position:relative;

　　/*其他的文字顏色、內邊距等樣式&hellip;&hellip;*/

　　}

　　.button::before{

　　content:'';/*用偽元素來生成一個矩形*/

　　position:absolute;

　　top:0;right:0;bottom:0;left:0;

　　z-index:-1;

　　background:#58a;

　　transform:skew(45deg);

　　}

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

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

“怎么用css3中的transform skewX實現平行四邊形的導航菜單”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！