<span class="triangle"></span>

.triangle {display: inline-block; /* 使 span 能够接受宽高 */width: 0; /* 宽度为 0 */height: 0; /* 高度为 0 */border-left: 50px solid transparent; /* 左边边框 */border-right: 50px solid transparent; /* 右边边框 */border-bottom: 100px solid blue; /* 底边边框的颜色（可更改为需要的颜色） */
}

1.必须时一个块级元素

2.宽高都为0；

3.左右边框 ：

 border-left: 50px solid transparent; /* 左边边框 */
  border-right: 50px solid transparent; /* 右边边框 */

4.下边框： 
    border-bottom: 100px solid blue; /* 底边边框的颜色（可更改为需要的颜色） */