CSS画三角形

原理：调整border（边框）的四个方向的宽度，线条样式以及颜色。

如果宽度调的足够大，改变不同方向的颜色，盒模型的border是四个梯形一样的线条。

 .no1{
     width:100px;
     height:100px;   
        border-left:100px #36FFCB solid;
     border-right:100px #86CDEA solid;
     border-bottom:100px #0436FF solid;
     border-top:100px #FF0001 solid;
      margin:0 auto;
     
    }

盒模型内部的height，width调为0px

 .no2{
     width:0px;
     height:0px;   
        border-left:100px #36FFCB solid;
     border-right:100px #86CDEA solid;
     border-bottom:100px #0436FF solid;
     border-top:100px #FF0001 solid;
      margin:0 auto;
     
    }

三角形：transparent 透明

 .no3{
     width:0px;
     height:0px;  
     border-left:100px solid #F00;
           border-top:100px solid   transparent; 
           border-right:100px solid   transparent; 
     border-bottom:100px solid   transparent; 
     margin:0 auto;
    }