一、平行四邊形

方法一：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揭祕》