《CSS揭祕》：平行四邊形

在視覺設計中，平行四邊形每每能夠傳達出一種動感。

問題

使用CSS來建立平行四邊形。能夠使用transform: skewX(-45deg)

可是這樣會使裏面的內容也傾斜。有兩種解決方案能夠解決這個問題

嵌套元素方案

使用一層額外的HTML元素來包裹內容，對容器設置skewX，在內容上應用一次反向skewX變形

.button { transform: skewX(45deg); }
.button > div { transform: skewX(-45deg); }

結果以下：

僞元素方案

使用僞元素方案。將全部樣式應用到僞元素上，而後對僞元素進行變形。爲了使僞元素保持良好的靈活性，能夠自動繼承主元素的屬性。最簡單的方式是對主元素設置position:relative;,對僞元素設置positon:absolute;。

.button {
    position: relative;
    display: inline-block;
    padding: .5em 1em;
    border: 0; margin: .5em;
    background: transparent;
    color: white;
    text-transform: uppercase;
    text-decoration: none;
    font: bold 200%/1 sans-serif;
}

.button::before {
    content: ''; /* To generate the box */
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    background: #58a;
    transform: skew(45deg);
}

獲得的結果以下：

使用僞元素方案還能夠實現一些其它效果，好比多重背景，邊框內圓角，多重邊框等。