3-2 形状篇-平行四边形

知识储备

---

这里的知识储备第一条和第二条摘自

http://www.bbs0101.com/archives/248.html

尊重原创作者（侵自删）

1.用法：transform: skew(30deg) 或者 transform: skew(30deg, 30deg)

• 一个参数时：表示水平方向的倾斜角度；


• 两个参数时：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度。

关于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

  HOME
           

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

HOME

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

结果：

导航栏