css实现梯形标签页
来源:互联网 发布:淘宝男模特 编辑:程序博客网 时间:2024/05/17 13:45
在web设计中,梯形标签页是很常见的一种形式,但是梯形又是一种很难实现的样式,很多开发者会直接用梯形背景图片来生成效果,但是采用背景图片的方式产生了额外的http请求,并不是一种非常理想的方式,这里笔者为大家带来一种直接用css来实现梯形效果的方法。
以一个简单的div为例:
<div class="div">这是一个梯形</div>
.div{ position: relative; display: inline-block; padding: .5em 1em .35em; color: white;}.div::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来对比查看效果,这里笔者将两种结果都展示出来:
既然一个梯形标签产生了,那我们就可以进一步生成多个标签页,这里笔者为大家带来一个简单的示例。
<nav> <a href="#">Home</a> <a href="#">Projects</a> <a href="#">About</a></nav>
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等查看不同的效果,这里笔者为大家展示几种效果:
感兴趣的读者可以自己尝试一些,如果有更好的方法,欢迎留言指教。
阅读全文
0 0
- css实现梯形标签页
- css实现梯形
- 10.(高级)CSS形状之:梯形标签
- 各种demo:css实现三角形,css大小梯形,svg使用
- 利用CSS画梯形
- CS秘密花园:梯形标签
- html css js 实现Tab标签页
- 浅谈CSS+jQuery实现标签页
- CSS, JavaScript, jQuery实现标签页切换
- CSS实现旋转标签
- 梯形
- MPI 实现梯形积分法
- MFC模仿vc6.0梯形标签控件
- div css 实现tabs标签
- CSS Spite实现菜单标签
- CSS实现排行榜标签样式
- css梯形、六角星、五角星、六边形
- css制作 平行四边形和梯形导航条
- 第二周项目二
- HDU 4057 AC自动机+状压dp
- 如何根据configure.ac和Makefile.am为开源代码产生当前平台的Makefile
- leetcode462. Minimum Moves to Equal Array Elements II
- 不同buildType下的区别构建配置方式
- css实现梯形标签页
- C++的三种访问权限与三种继承方式
- 第二周项目一C/C++语言中函数参数传递的三种方式之传值
- UIlabel,文字复制
- 大型分布式网站优化术语分析
- php中的错误类写法
- BZOJ 1003 物流运输 (spfa+dp)
- php根据Http请求头部信息下载文件
- Linux系统编程——vfork() 函数详解