《CSS揭秘》：梯形标签页

bovenson 发布于2019-08-29 11:21 / 1906人阅读

摘要：梯形标签页一直以来，在里都没有简单的方式生成梯形标签页。缺点是如果梯形标签的宽度高度背景等有变化，就得重新切图。同时设置轴的缩放来使其高度尽量不发生变化。但是标签页一般用于导航，这种方法可以满足大部分场景。

梯形标签页

一直以来，在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梯形标签页切换标签页效果分页标签

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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