《CSS揭秘》：梯形標簽頁

bovenson 發布于2019-08-29 11:21 / 1921人閱讀

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

梯形標簽頁

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

背景圖片

本方案就是對標簽頁設置梯形的背景圖片。
background: url(...)
缺點是如果梯形標簽的寬度、高度、背景等有變化，就得重新切圖。基本不能重用

偽元素

偽元素方案就是對元素設置before和after偽元素。對偽元素設置旋轉等操作。

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

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

3D旋轉

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

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

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

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/111590.html

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

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

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

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

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

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

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

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

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

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

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