CSS实现三角形效果

.box{
    width:20px;
    height:20px;
    background-color:blue;
}
<div class='box'></div>

2. 给div添加四条边框样式，边框设置的宽一点， 四条边框的颜色给不一样的值

.box{
     width:50px;
     height:50px;
     background-color:blue;             
     border-top:50px solid red;
     border-right:50px solid yellow;
     border-bottom:50px solid green;
     border-left:50px solid pink;
}

3. 把div的宽高设置为0px，去掉蓝色的背景色

.box{
     width:0px;
     height:0px;
     border-top:50px solid red;
     border-right:50px solid yellow;
     border-bottom:50px solid green;
     border-left:50px solid pink;
}

4. 假设想要一个向上的三角形，只要把‘小盒子’上、右、左 方向边框的颜色设置为透明

.box{
      width:0px;
      height:0px;
      border-top:50px solid rgba(0,0,0,0);
      border-right:50px solid  rgba(0,0,0,0);
      border-bottom:50px solid green;
      border-left:50px solid  rgba(0,0,0,0);
}