《CSS揭秘》：梯形標簽頁

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

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

梯形標簽頁

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

背景圖片

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

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

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

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

3D旋轉(zhuǎn)

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

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

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

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

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

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

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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