前置知識：基本的css變形

一、平行四邊形

要實現一個平行四邊形，可以使用CSS的skew變形屬性來傾斜元素。

transform: skewX(-45deg);

圖-1顯示容器和內容都出現了傾斜，該如何解決這個問題？

二、嵌套方案

我們通過將內容嵌套 div 并使用 反向skew變形，抵消容器的影響。

.box {transform: skewX(-45deg);.content {transform: skewX(45deg);}
}

雖然我們實現了目標效果，但如此一來，原本僅需單一元素即可表達的內容，現在卻需要額外增加一個元素。

三、偽元素方案

還有一種辦法是創建一個偽元素，將變形的樣式都轉移至偽元素上，這樣就不會影響原來的內容了。
為了讓偽元素的大小和主元素一致，我們可以這樣實現：

• 設置主元素 position: relative;
• 同時將偽元素的各方向偏移量設置為 0 以達到貼合主元素。

.button {  position: relative;    /* 其他的文字顏色、內邊距等樣式…… */  
}  
.button::before {   content: '';    position: absolute;  top: 0; right: 0; bottom: 0; left: 0;  
}

為了確保偽元素位于主元素下方而不產生遮擋，需要將偽元素的 z-index 設為 -1。

.button {  position: relative;    /* 其他的文字顏色、內邊距等樣式…… */  
}  
.button::before {   content: '';    position: absolute;  top: 0; right: 0; bottom: 0; left: 0;  z-index: -1;transform: skewX(-45deg);background-color: xxx;
}

我們最終實現的視覺效果與嵌套元素完全相同。此外，這種偽元素方案還可用于其他圖形效果，例如配合旋轉屬性實現菱形容器。

要點回顧

• skew變形：通過skew()實現元素傾斜，接收兩個參數分別控制x軸和y軸偏移量。若僅指定一個參數，則默認應用于水平方向
• 內容保護：可采用嵌套反向傾斜或偽元素技術，確保內容不受容器變形影響