实现一个平行四边形

需求如题，想了下用普通的变换如旋转、缩放、位移都是没法实现的。
无奈之下谷歌，网友们提供了两个实现方式，第一个是经过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;
}