css 绘制三角形

问题： 页面上的一些小图标完全可以通过 css 进行绘制，这样比直接使用图片效率更高

方法： 代码如下：

.tri{
    
    
  width:0;
  height:0;
  border-left:5px solid transparent;
  border-right:5px solid transparent;
  border-top:8px solid black;
}

首先，给元素设置宽高为0，然后通过border来绘制三角形，具体的规则是如果你想要绘制一个箭头朝向为南方的箭头，你就需要将它两边（即 left 和 right ）设置为透明的边框，并且两边边框的长度之和为三角形的非等腰的那条边，将它的背面（即top）设置边框，长度即为刚才那条边的高。