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;

     }

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