CSS3知识汇总17：梯形标签

【普通的梯形】

div{

    border:solid;

    border-width: 0 50px 100px 50px;

    border-color: transparent transparent red transparent;

    height: 0;

    width: 100px;

}

【梯形标签：一个】

div{

    position: relative;

    display: inline-block;

    padding:.5em 1em .35em;

    color:white;

}

div::before{

    content:'';

    position: absolute;

    top: 0;

    right: 0;

    bottom:0;

    left:0;

    z-index: -1;

    background-color: #58a;

    transform: scaleY(1.3) perspective(.5em) rotateX(5deg);

    transform-origin: bottom;

}

【多个梯形标签】

<div>

    <a href="">首页</a>

    <a href="">国内新闻</a>

    <a href="">国际新闻</a>

</div>

div > a{

    position: relative;

    display: inline-block;

    padding: .3em 1em 0;

}

div > a::before{

    content:'';

    position: absolute;

    top: 0;

    right: 0;

    bottom:0;

    left:0;

    z-index: -1;

    background-color: #ccc;

    background-image: linear-gradient(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;

    transform: perspective(.5em) rotateX(5deg);

    transform-origin: left;

}

变换 transform-origin会产生不同的标签样式

 transform-origin: left  transform-origin: right  transform-origin: top  transform-origin: bottom  transform-origin: bottom left