标签:
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 可以得到左侧倾斜或右侧倾斜的标签页)
标签:
原文地址:http://www.cnblogs.com/lg00001/p/5851381.html