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

本篇內(nèi)容介紹了“怎么用css3中的transform skewX實(shí)現(xiàn)平行四邊形的導(dǎo)航菜單”的有關(guān)知識(shí)，在實(shí)際案例的操作過(guò)程中，不少人都會(huì)遇到這樣的困境，接下來(lái)就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！

　　平行四邊形其實(shí)是矩形的超集：它的各條邊是兩兩平行的，但各個(gè)角則不一定都是直角。在視覺(jué)設(shè)計(jì)中，平行四邊形往往可以傳達(dá)出一種動(dòng)感。

　　讓我們?cè)囍肅SS創(chuàng)建一個(gè)按鈕狀的平行四邊形鏈接。我們的起點(diǎn)就是一個(gè)普通的塊狀按鈕，輔以一些簡(jiǎn)單的樣式，然后，我們可以通過(guò)skew()的變形屬性來(lái)對(duì)這個(gè)矩形進(jìn)行斜向拉伸：

　　transform:skewX(-45deg);

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

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

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

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

　　</a>

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

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

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

　　偽元素方案

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

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

　　.button{

　　position:relative;

　　/*其他的文字顏色、內(nèi)邊距等樣式&hellip;&hellip;*/

　　}

　　.button::before{

　　content:'';

　　position:absolute;

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

　　}

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

　　.button{

　　position:relative;

　　/*其他的文字顏色、內(nèi)邊距等樣式&hellip;&hellip;*/

　　}

　　.button::before{

　　content:'';/*用偽元素來(lái)生成一個(gè)矩形*/

　　position:absolute;

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

　　z-index:-1;

　　background:#58a;

　　transform:skew(45deg);

　　}

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

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

“怎么用css3中的transform skewX實(shí)現(xiàn)平行四邊形的導(dǎo)航菜單”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實(shí)用文章！