知识储备
这里的知识储备第一条和第二条摘自
尊重原创作者（侵自删）
1.用法：transform: skew(30deg) 或者 transform: skew(30deg, 30deg)
<ul>
<li>一个参数时：表示水平方向的倾斜角度；</li>
<li>两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。</li>
</ul>
关于skew倾斜角度的计算方式表面上看并不是那么直观，这里借鉴某大拿绘制的图举例说明一下：
首先需要说明的是skew的默认原点transform-origin是这个物件的中心点
skewX(30deg) 如下图：
水平轴变形30deg
skewY(10deg) 如下图：
Y轴变形10deg
skew(30deg, 10deg) 如下图：
两者效果结合
2.transform: rotate
共一个参数“角度”，单位deg为度的意思，正数为顺时针旋转，负数为逆时针旋转，上述代码作用是顺时针旋转45度。
3.::after/::before(CSS3 在CSS2中是一个冒号) **
:before和:after的作用就是在指定的元素内容**（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素
小测试
有了这些知识，那开始尝试画一个平行四边形
代码示例
html
<a href="javascript:void(0)">
<span>HOME</span>
</a>
css
a{
display: inline-block;
background: #58a;
text-align: center;
padding: 10px 20px;
text-decoration: none;
color: white;
transform: skewX(-45deg);//!!这里我们使用变形来得到平行四边形
}
效果：
初步效果
很明显字也变形了，这里我们思考一下，可以将span再反向倾斜(这也是我们要多嵌套一层Html的原因).
向span元素添加CSS：
css
display: inline-block;
transform: skewX(45deg);
结果：
我们需要的效果
思考
我们是否可以纯CSS实现呢？！而不是通过增加Html结构
根据前面提到的知识储备，我们可以通过伪元素来实现！
示例代码2
html
<span class="button">HOME</span>
css
.button{
position: relative;
color: white;
padding: .6em 2em;
}
.button::before{
content: ''; //必须
position: absolute;
top:0; right: 0; bottom: 0; left: 0;
transform: skew(-45deg); //利用伪元素来做一个平行四边形背景
background: #58a;
z-index: -1; //!!阻止字被覆盖
}
效果：
纯CSS实现的效果
这里需要注意是：
** z-index: -1;**否则我们的文本会被覆盖
skew()；属性只对block和inline-block产生效果
最后，让我们来尝试一下做一个导航栏
效果类似于
https://www.behance.net/gallery/11668967/Freebie-Free-PSD-Template-CV-page
结果：
导航栏
