成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

利用transform skewX制作平行四邊形導(dǎo)航菜單

sumory / 454人閱讀

摘要：平行四邊形其實(shí)是矩形的超集它的各條邊是兩兩平行的，但各個(gè)角則不一定都是直角。在視覺(jué)設(shè)計(jì)中，平行四邊形往往可以傳達(dá)出一種動(dòng)感。讓我們?cè)囍脛?chuàng)建一個(gè)按鈕狀的平行四邊形鏈接。

平行四邊形其實(shí)是矩形的超集：它的各條邊是兩兩平行的，但各個(gè)角則不一定都是直角。在視覺(jué)設(shè)計(jì)中，平行四邊形往往可以傳達(dá)出一種動(dòng)感。
讓我們?cè)囍?CSS 創(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：


 www.w3cbest.com


.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)容并不是包含在偽元素里的，所以內(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)邊距等樣式…… */
}
.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ì)被推到宿主元素之后。現(xiàn)在我們要做的最后一步，就是盡情地對(duì)它設(shè)置變形樣式，并享受美好的結(jié)果。最終版的代碼如下所示，它產(chǎn)生的視覺(jué)效果跟前文所述技巧是完全一致的：

.button {
 position: relative;
 /* 其他的文字顏色、內(nèi)邊距等樣式…… */
}
.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)景中，從而得到各種各樣的效果。

更多精彩

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113970.html

相關(guān)文章

  • 利用transform skewX制作平行四邊形導(dǎo)航菜單

    摘要：平行四邊形其實(shí)是矩形的超集它的各條邊是兩兩平行的，但各個(gè)角則不一定都是直角。在視覺(jué)設(shè)計(jì)中，平行四邊形往往可以傳達(dá)出一種動(dòng)感。讓我們?cè)囍脛?chuàng)建一個(gè)按鈕狀的平行四邊形鏈接。 平行四邊形其實(shí)是矩形的超集：它的各條邊是兩兩平行的，但各個(gè)角則不一定都是直角。在視覺(jué)設(shè)計(jì)中，平行四邊形往往可以傳達(dá)出一種動(dòng)感。讓我們?cè)囍?CSS 創(chuàng)建一個(gè)按鈕狀的平行四邊形鏈接。我們的起點(diǎn)就是一個(gè)普通的塊狀按鈕，輔以...

    caige 評(píng)論0 收藏0

  • 《CSS揭秘》：平行四邊形

    摘要：在視覺(jué)設(shè)計(jì)中，平行四邊形往往可以傳達(dá)出一種動(dòng)感。問(wèn)題使用來(lái)創(chuàng)建平行四邊形。將所有樣式應(yīng)用到偽元素上，然后對(duì)偽元素進(jìn)行變形。為了使偽元素保持良好的靈活性，可以自動(dòng)繼承主元素的屬性。 在視覺(jué)設(shè)計(jì)中，平行四邊形往往可以傳達(dá)出一種動(dòng)感。 問(wèn)題 使用CSS來(lái)創(chuàng)建平行四邊形?？梢允褂胻ransform: skewX(-45deg) showImg(https://segmentfault.com/...

    yuxue 評(píng)論0 收藏0

  • 記一些css 3效果

    摘要：半透明邊框規(guī)定背景的繪制區(qū)域效果如圖平行四邊形方法一平行四邊形方法二平行四邊形毛玻璃效果時(shí)間慢慢地帶走了本不該留下的，我已經(jīng)快要想不起來(lái)你笑起來(lái)的樣子，你穿的什么衣服牽著誰(shuí)的手，突然難過(guò)了。 半透明邊框 background-clip: 規(guī)定背景的繪制區(qū)域 .div { width: 200px; height: 200px; background: blue;...

    only_do 評(píng)論0 收藏0

  • css揭秘筆記——形狀

    摘要：把改成，就變成了這樣實(shí)現(xiàn)邊框內(nèi)圓角多重邊框還有下實(shí)現(xiàn)多重背景為某一層背景單獨(dú)設(shè)置類似這樣的屬性等等。裁切路徑方案這種方案，當(dāng)內(nèi)邊距不夠?qū)挄r(shí)，會(huì)裁切掉文本。 自適應(yīng)的橢圓（border-radius的用法） 單獨(dú)指定水平和垂直半徑 長(zhǎng)寬固定的元素，可以通過(guò)指定寬高的一半，變?yōu)闄E圓形，格式為兩個(gè)值用/分開。 width: 100px; height: 80px; border-radi...

    dantezhao 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<