CSS画三角形原理

首先我们定义一个宽和高都为0的盒子，设置40px的边框来看一下效果。

<style>
#div1{
width: 0px;
height: 0px;
border:40px solid red;
}
</style>
<div id="div1"></div>

如果我们把边框的上下左右都设置为不同的颜色，来看下效果<style>
#div1{
width: 0px;
height: 0px;
border-top: 40px solid red;
border-right: 40px solid blue;
border-bottom: 40px solid green;
border-left: 40px solid pink;
}
</style>


看图说话，边框的上下左右是这样子的。知道了这个，我们利用边框来设计三角形就很容易了。
把不需要显示的边框部分设置为transparent。
举个栗子：
只显示下边框的绿色三角形<style>
#div1{
width: 0px;
height: 0px;
border:40px solid transparent;
border-bottom: 40px solid green;
}
</style>


扩展1：   当边框设置为只有上边框、右边框，没有下、左时，如下演示：
#div1{
width: 0px;
height: 0px;
border-color: red blue green pink;
border-style: solid;
border-width: 40px 40px 0 0;
}
效果为



扩展2：当设置为只有下、左时，结果为#div1{
width: 0px;
height: 0px;
border-color: red blue green pink;
border-style: solid;
border-width: 0 0 40px 40px ;
}


扩展3：有右和下。直接上代码了。
#div1{
    width: 0px;  
    height: 0px;  
    border-color: red blue green pink;
    border-style: solid;
    border-width: 0 40px 40px 0;

     }



改变了右边框的尺寸：

#div1{
    width: 0px;  
    height: 0px;  
    border-color: red blue green pink;
    border-style: solid;
    border-width: 0 80px 40px 0;

     }



扩展4：有上左
#div1{
    width: 0px;  
    height: 0px;  
    border-color: red blue green pink;
    border-style: solid;
    border-width: 40px 0 0 40px;

     }



改变了上边框的尺寸：
#div1{
    width: 0px;  
    height: 0px;  
    border-color: red blue green pink;
    border-style: solid;
    border-width: 80px 0 0 40px;
     }



其他都同理，上下拉长和左右拉长就是看哪个方向边框值大