《CSS揭秘》：梯形標(biāo)簽頁

bovenson 發(fā)布于2019-08-29 11:21 / 1929人閱讀

摘要：梯形標(biāo)簽頁一直以來，在里都沒有簡單的方式生成梯形標(biāo)簽頁。缺點(diǎn)是如果梯形標(biāo)簽的寬度高度背景等有變化，就得重新切圖。同時(shí)設(shè)置軸的縮放來使其高度盡量不發(fā)生變化。但是標(biāo)簽頁一般用于導(dǎo)航，這種方法可以滿足大部分場景。

梯形標(biāo)簽頁

一直以來，在CSS里都沒有簡單的方式生成梯形標(biāo)簽頁。常見的方案是使用背景圖片或者偽元素。但是這兩種方案使用起來不夠靈活。比如標(biāo)簽大小改變，增加紋理背景時(shí)候，這兩種方案就很難維護(hù)。

背景圖片

本方案就是對標(biāo)簽頁設(shè)置梯形的背景圖片。
background: url(...)
缺點(diǎn)是如果梯形標(biāo)簽的寬度、高度、背景等有變化，就得重新切圖?；静荒苤赜?/p> 偽元素

偽元素方案就是對元素設(shè)置before和after偽元素。對偽元素設(shè)置旋轉(zhuǎn)等操作。

:before {
  transform: skewx(30deg);
}
:before {
  transform: skewx(-30deg);
}

缺點(diǎn)是如果要給梯形設(shè)置邊框等樣式，就會比較困難。

3D旋轉(zhuǎn)

我們想象，一個(gè)平面的矩形，垂直于平面進(jìn)行旋轉(zhuǎn)，投射在2D平面內(nèi)就是一個(gè)梯形。
transform: perspective(.5em) rotateX(5deg)
另外，由于默認(rèn)是已矩形中軸為軸旋轉(zhuǎn)，這樣的到的梯形的寬度會增加，高度會減少，并且位置會下移。這樣就需要為其指定旋轉(zhuǎn)軸。同時(shí)設(shè)置Y軸的縮放來使其高度盡量不發(fā)生變化。

transform: scale(1.1, 1.3) perspective(.5em) rotateX(5deg);
transform-origin: bottom;

即使是這樣，由于斜邊的角度依賴于元素的寬度，如果標(biāo)簽不是等寬，就會造成一些差異。但是標(biāo)簽頁一般用于導(dǎo)航，這種方法可以滿足大部分場景。

云服務(wù)器 GPU云服務(wù)器 css梯形標(biāo)簽頁切換標(biāo)簽頁效果分頁標(biāo)簽

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

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

相關(guān)文章

[CSS]《CSS揭秘》第三章——形狀

摘要：自適應(yīng)橢圓斜杠前為水平半徑，后為垂直半徑。和下特有的，用于在渲染中向元素邏輯上的頭部或尾部添加內(nèi)容。所以不要用或展示有實(shí)際意義的內(nèi)容，盡量使用它們顯示修飾性內(nèi)容，例如圖標(biāo)。和必須配合屬性來使用，用來定義插入的內(nèi)容，必須有值，至少是空。自適應(yīng)橢圓 border-radius:50% / 50%;//斜杠前為水平半徑，后為垂直半徑。 background: #fb3; b...

ysl_unh 2019-08-30 15:53 評論0 收藏0
css揭秘筆記——形狀

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

dantezhao 2019-08-29 13:47 評論0 收藏0
哪些你知道或不知道的css，在這里或許都齊全

摘要：簡單就意味著更快的開發(fā)速度，更小的維護(hù)成本，同時(shí)往往具有更好的體驗(yàn)下面我介紹哪些或許你不知道小技巧。默認(rèn)為，此時(shí)陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。首先，我們要明白這里的最小寬度值是什么意思。暑假實(shí)習(xí)的時(shí)候帶我的師傅，告訴我要注重基礎(chǔ)，底層實(shí)現(xiàn)原理。才能在日新月異的技術(shù)行業(yè)站住腳跟，以不變應(yīng)萬變，萬丈高樓平地起，所以我們應(yīng)該不斷的去學(xué)習(xí)，去交流。...

Jackwoo 2019-08-30 13:50 評論0 收藏0
哪些你知道或不知道的css，在這里或許都齊全

摘要：簡單就意味著更快的開發(fā)速度，更小的維護(hù)成本，同時(shí)往往具有更好的體驗(yàn)下面我介紹哪些或許你不知道小技巧。默認(rèn)為，此時(shí)陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。首先，我們要明白這里的最小寬度值是什么意思。暑假實(shí)習(xí)的時(shí)候帶我的師傅，告訴我要注重基礎(chǔ)，底層實(shí)現(xiàn)原理。才能在日新月異的技術(shù)行業(yè)站住腳跟，以不變應(yīng)萬變，萬丈高樓平地起，所以我們應(yīng)該不斷的去學(xué)習(xí)，去交流。...

Bryan 2019-08-21 17:13 評論0 收藏0
哪些你知道或不知道的css，在這里或許都齊全

摘要：簡單就意味著更快的開發(fā)速度，更小的維護(hù)成本，同時(shí)往往具有更好的體驗(yàn)下面我介紹哪些或許你不知道小技巧。默認(rèn)為，此時(shí)陰影與元素同樣大。如果沒有指定，則由瀏覽器決定通常是的值，不過目前取透明。首先，我們要明白這里的最小寬度值是什么意思。暑假實(shí)習(xí)的時(shí)候帶我的師傅，告訴我要注重基礎(chǔ)，底層實(shí)現(xiàn)原理。才能在日新月異的技術(shù)行業(yè)站住腳跟，以不變應(yīng)萬變，萬丈高樓平地起，所以我們應(yīng)該不斷的去學(xué)習(xí)，去交流。...

fai1017 2019-08-01 17:51 評論0 收藏0