这次给大家带来CSS怎样做出梯形的标签页，CSS做出梯形标签页的注意事项有哪些，下面就是实战案例，一起来看一下。
在web设计中，梯形标签页是很常见的一种形式，但是梯形又是一种很难实现的样式，很多开发者会直接用梯形背景图片来生成效果，但是采用背景图片的方式产生了额外的http请求，并不是一种非常理想的方式，这里笔者为大家带来一种直接用css来实现梯形效果的方法。
以一个简单的p为例：
这是一个梯形
.p{ position: relative; display: inline-block; padding: .5em 1em .35em; color: white;}.p::before{ content: ''; /*用伪元素来生成一个矩形*/ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #58a; transform: scaleY(1.3) perspective(.5em) rotateX(5deg); transform-origin: bottom;}
如果我们直接对元素结点进行3D变形，那么元素内的内容也会产生变形，这是一种不理想的效果，所以这里利用伪元素，将变形效果作用到伪元素上，就可以实现理想的效果。在这里，变形的时候，我们固定住了底部，它的高度是会发生变化的，所以通过scaleY(1.3)来补足它在高度上的缩水。读者可以去掉scaleY(1.3)和transform-origin来对比查看效果，这里笔者将两种结果都展示出来：
这是没有scaleY和transform-origin产生的结果
这是上述代码产生的样式结果
既然一个梯形标签产生了，那我们就可以进一步生成多个标签页，这里笔者为大家带来一个简单的示例。
nav>a{ position: relative; display: inline-block; padding: .3em 1em 0;}nav>a::before{ content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; background: #ccc; background-image: linear-gradient(hsla(0,0%,100%,.6),hsla(0,0%,100%,0)); border: 1px solid rgba(0,0,0,.4); border-bottom: none; border-radius: .5em .5em 0 0; transform: perspective(.5em) rotateX(5deg); transform-origin: bottom;}
产生的效果图是这样的：
读者可以改变transform-origin的属性为：left,right,bottom left, left right等查看不同的效果，这里笔者为大家展示几种效果:
相信看了本文案例你已经掌握了方法，更多精彩请关注创想鸟其它相关文章！
推荐阅读：
css3的pointer-events使用详解
完全利用CSS实现元素居中
focus-within的使用详解
CSS3做出无缝轮播广告
以上就是CSS怎样做出梯形的标签页的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1609388.html
微信扫一扫 
支付宝扫一扫 
