形状-平行四边形

平行四边形是矩形的超集，我们可以通过 skew() 的变形属性把一个普通的块状按钮进行斜向的拉伸，从而形成一个平行四边形。

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

.button { 
    background: #FAC;
    transform: skewX(-45deg);
    text-align: center;
}

如上图所示，在容器变形的同时，容器中的内容也发生了变形，如何才能让容器变形而内容保持不变呢？

方案一 嵌套元素

对内容通过 skew() 进行一次反向变形

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

.button { 
    background: #FAC;
    transform: skewX(-45deg);
    text-align: center;
}
.button > div { 
    transform: skewX(45deg);
}

结果如图所示：

方案二 伪元素方案

实现思路：
将样式应用到伪元素上，然后对伪元素进行变形。通过下面的代码将伪元素拉伸到与宿主元素相同的尺寸。

.button {
position: relative;
/* 其他的文字颜色、内边距等样式…… */
}
.button::before {
content: '';
position: absolute;
top: 0; right: 0; bottom: 0; left: 0;
}

此时，伪元素生成的方块会叠加在宿主元素上，对伪元素加背景会覆盖宿主元素中的内容，我们通过设置伪元素的z-index属性来解决。

 z-index: -1;

最后，对伪元素进行变形

transform: skewX(-45deg);

最终代码：

.button { 
    position: relative;
    height: 100px;
    width: 300px;
    margin: 0 auto;
    text-align: center;
    line-height: 100px;
}
.button::before {
    content: '';
    position: absolute;
    top: 0px; right: 0px; bottom: 0px; left: 0px;
    background: #ffaacc;
    z-index: -1;
    transform: skewX(-45deg);
}

结果如图所示：