首页 > 代码库 > css 梯形标签页
css 梯形标签页
html 代码 略
css :
nav > a{ position: relative; display: inline_block; padding: .3em 1em 0;}nav > a { content: ‘‘; position: absolute; top: 0; right: 0; bottom:0; left: 0; z-index: -1; background; #ccc; background-image;linear-gradint( 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; box-shadow: 0 .15em white inset; transform: perspective(.5) rotate(5deg); transform-origin: bottom;}
效果图如下:
(只需改变 transform-origin 可以得到单侧面的梯形:设置为 bottom left 或 bottom right 可以得到左侧倾斜或右侧倾斜的标签页)
css 梯形标签页
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。