需求如題，想了下用普通的變換如旋轉、縮放、位移都是無法實現的。
無奈之下谷歌，網友們提供了兩個實現方式，第一個是通過border的方式，這個比較tricky；第二種方式很吸引人，原來變換中除了我上面提到的三種方式之外，還有一個skew，英文意思是歪曲，正是實現平行四邊形的利器。

width: 200px; height: 100px; background-color: blue; transform: skew(15deg,0);

接下來我們看看這個skew函數怎么工作的
從MDN網站上看到的介紹
skew(ax, ay)
其中

ax Is an <angle> representing the angle to use to distort the element
along the abscissa.

字面意思是沿著x軸進行變形，那就是相對縱軸變形了；同理ay是沿著y軸，就是相對x軸變形。

還有這么一句話規定了變形的規則

The coordinates of each point are modified by a value proportionate to
the specified angle and the distance to the origin; thus, the farther
from the origin a point is, the greater will be the value added it.

這句話告訴我們離原點越遠的坐標改變越大，而且這種改變是等比例的。

我們了解下屏幕坐標系長什么樣子。

可以看到原點在左上角，x軸向右延伸，y軸向下延伸。
回頭看上面的例子transform: skew(15deg,0);中第一個參數表示沿著x軸的變化，就是相對y軸的變化，這個變化值是15deg，正好就是我們畫出的效果圖。

再來看看上面提到的用border如何實現。
實現思路是通過拼兩個三角形來模擬平行四邊行，而矩形又可以通過border來實現，我們先看看如何實現一個三角形

如圖可以隱藏另外三個邊來實現一個三角形，兩個三角形就可以形成一個平行四邊形
三角形的斜率可以通過寬高比不同來實現。

<div class="orgram"></div>.orgram:before {content: "";display:block;position: absolute;border: 10px solid transparent;border-top-color: red;height: 0px;width: 0px; }.orgram:after {content: "";display:block;position: absolute;left: 18px;margin-top:-10px;border: 10px solid transparent;border-bottom-color: red;height: 0px;width: 0px; }

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的实现一个平行四边形的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。