實現一個平行四邊形

需求如題，想了下用普通的變換如旋轉、縮放、位移都是沒法實現的。
無奈之下谷歌，網友們提供了兩個實現方式，第一個是經過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;
}