css 梯形标签页

Posted 2020-08-07

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