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

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

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

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

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

還有這么一句話規(guī)定了變形的規(guī)則

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);中第一個參數(shù)表示沿著x軸的變化，就是相對y軸的變化，這個變化值是15deg，正好就是我們畫出的效果圖。

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

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

<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; }

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。