平行四邊形是矩形的超集，我們可以通過 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);
}

結果如圖所示：