利用border画三角形
<div class="triangle"></div>
.triangle {
width: 0px;
height: 0px;
border-left: 100px solid transparent;
border-right: 100px solid transparent;
border-top: 100px solid transparent;
border-bottom: 100px solid #000;
}
将元素宽高设为0,运用border的宽度绘制三角形
![border三角形](https://i-blog.csdnimg.cn/blog_migrate/d33427b09f89bce03c888888d7e3010d.png)