三角形制作

关于小型三角形制作，在项目中，我们会用到三角形定位到矩形盒子上就会让盒子产生倾斜效果以达到想要的目的。

1. 首先三角形代码如下：

div {
      width: 0;
      height: 0;
      border: 50px solid transparent;
      border-bottom-color: #f00;
  }

效果如图：

2. 制作左三角形，注意，这里不是直接让三角形旋转，而是让它的大小变得与定位的父盒子一样高度，**相当于上面三角形的一半，**代码如下：

.son {
       width: 0;
       height: 0;
       border: solid transparent;
       border-width: 0 0 50px 50px;
       border-bottom-color: #f00;
   }

效果如图：

3. 制作右三角形同理，只不过改变了两句代码：

border-width: 50px 50px 0 0;
border-top-color: #f00; 

效果如图：

4. 综合起来定位后效果如图所示：

大功告成！！！！