原理:
增加有宽度的边框,颜色设置为透明,需要显示的设置颜色(上下左右为三角形的底边)
省流:
<span class="triangle"></span>
.triangle{
border: 50px solid transparent; //50px为三角形的宽
//下面二选一
border-bottom-color: red; //不设置宽度就是等腰三角形
border-bottom:100px solid red; //设置了长度就是三角形的高
}
扩展:clip-path(裁剪)
.triangle{
border: 50px solid red;
clip-path: polygon(0 50%, 0 100%, 100% 100%);
//polygon():多边形,参数为多边形的顶点
}