7.（高级）CSS形状之：平行四边形

一、平行四边形

 

方法一：2个HTML

HTML

<a href="#" class="button">

    <div>Click me</div>

</a>

CSS

.button{transform:skew(-45deg);}

.button div{transform:skew(45deg);}

方法二：伪元素

HTML

<div class="button">Click me</div>

CSS

.button::before{

    content:’’;

    position:absolute;

    top:0;

    left:0;

    bottom:0;

    right:0;

    z-index:-1;

    background:#58a;

    transform:skew(45deg);

}

声明：以上方法参考《CSS揭秘》