三角形的制作

在前端的编程中，我们有时候会遇到要制作一些特殊的图像，类似三角形还有圆等等。

我们在遇到这种情况下，解决方法有二种。

1. 添加背景图片，也就是用background这个属性添加图片。

这个方法就是前提要有图片。

1. 自己制作

下面我来介绍一下三角形的制作。

        我们认识一下三角形制作的原理

          先上图：

                             

        看图可以发现我给div的边框设置了20px的大小和div的大小为宽 高各100px。

    这是时候边跨成一个梯形。

       那我把div的宽高设置成0px，边框设置70px。就可以得到下图。

       

    到这里就出现了三角形，但是是四个三角形。那我们怎么得到一个三角形呢。

这里就要引进新的知识，transparent透明色，我们通过改变三角形的颜色就可以得到想要的三角形了    例：

       

 

       

       

        注：border-color的颜色设置顺序为 上 右 下 左

        这就是三角形的制作。