如何写出小三角

在一些页面中我们经常会看到一些三角图标，但不能用图片实现。也没有专门的属性来写出这个小三角，那我们该怎样实现这类效果呢？？

 我们可以选择通过别的属性来实现这个视觉效果，比如通过边框border：;

如果我们不给宽高，直接加上下左右的边框会是什么样的嘞

div{
     width:0;
     height:0;
     border-left:20px solid red;
     border-top:20px solid rgb(125, 234, 16);
     border-right:20px solid rgb(32, 95, 177);
     border-bottom:20px solid rgb(213, 210, 35);
     margin: 20px;
    }

可以看到四个边都被平均分配挤成了三角形

 离我们的目标已经很近了，那把其他三边的边框隐藏掉不就剩下我们想要的结果了嘛

这里有两种写法

第一种（把其他三边长度变为0）：

div{
     width:0;
     height:0;
     border-left:20px solid red;
     border-top:0;
     border-right:0;
     border-bottom:0;
   }

第二种（把其他三边颜色变透明）：

div{
     width: 0;
     height: 0;
     border:20px solid transparent;
     border-left: 20px solid red;
     margin: 20px;
   }

需要注意的是，宽和高是不能省略滴哦！！！