html 代码 略

css :

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-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 可以得到左侧倾斜或右侧倾斜的标签页）