首页 > Web开发 > 详细

css 梯形标签页

时间:2016-09-08 00:41:14      阅读:219      评论:0      收藏:0      [点我收藏+]

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 梯形标签页

原文:http://www.cnblogs.com/lg00001/p/5851381.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!