首页 > 代码库 > 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 梯形标签页