平行四邊形使用在網頁設計的時候，是為了讓頁面看起來更活潑更有動感。

首先用skew()來製作一個平行四邊形的按鈕。

<a href="#" class="parallelograms">
    BUTTON
</a>

.parallelograms {
  transform: skew(-45deg);
  /* color, paddings, etc. */    
  padding: .5em 1.5em;
  color: white;
  font-size: 1.5em;
  font-family: helvetica;
  font-weight: 700;
  text-decoration: none;
  background: #df343d;
}

雖然形狀是變了，同時裡面的文字也變形了，這不是我們要的效果。有沒有方法是只改變形狀，不改變文字呢？

最簡單的方法是形狀和文字分開使用二個元素，skew()使用在外層，內容層用反方向的skew()調回來。

<a href="#" class="nested">
    <div>BUTTON</div>
</a>

.nested {
  transform: skew(-45deg);
  /* color, paddings, etc. */
  padding: .5em 1.5em;
  color: white;
  font-size: 1.5em;
  font-family: helvetica;
  font-weight: 700;
  text-decoration: none;
  background: #df343d;
}

.nested > div {
  transform: skew(45deg);
}

然而就需要用到多餘的元素，有沒有只用一個元素就能做到我們要的效果呢？

另一個方法是用偽元素做出背景，skew()用在這個偽元素上面。因為內容不在偽元素上，所以不會受影響。

我們想要偽元素背景和原本設定的元素同樣尺寸，而且會自動更新，使用在做頁面佈局時讓某個元素填滿父層的方法，其父元素設position: relative，子元素用position: absolute然後四個邊界距離都是0。

這時會發現內容的字不見了，因為偽元素壓在上層，新增z-index: -1移到下層內容文字就會出來。

這下子我們的按鈕和前一個方法做出來的看起來是一模一樣。

<a href="#" class="pseudo">
    BUTTON
</a>

.pseudo {
  position: relative;
  /* color, paddings, etc. */
  padding: .5em 1.5em;
  font-family: helvetica;
  color: white;
  font-size: 1.5em;
  font-weight: 700;
  text-decoration: none;
}

.pseudo::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    /* 背景色設在偽元素上 */
    background: #df343d;
    transform: skew(-45deg);
}

這個技巧不只能用在skew()，任何用到 CSS transform 但又不想內容跟著 transform 時都可以使用。

而且前面我們解決過的內部圓角和多重邊界也能使用偽元素來做喔！

CodePen