利用css样式中的边框（border）属性我们也可以实现三角形
1、假设现在有一个有高度和宽度的正方形盒子（div），给盒子添加边框（适当增加边框的宽度。这样才能看出效果）
效果图1.jpg
2、有高度和宽度时。盒子中间可以看到空白区域，每个边框是成45°角连接，那么现在我们把盒子的宽度和高度都设置为0，来看看效果
效果图2.jpg
3、现在已经有三角形了，就需要根据自己的需求来留下哪一个方向上的三角形了。假设我需要一个向上的三角形，那么左边，上面和右边的三角形就不需要了。把这三个方向上的三角形的颜色设置为透明（transparent）就行了。
效果图3.png
4、上代码
html
<div></div>
css
div{
/*将div宽高设置为0*/
width: 0px;
height: 0px;
/*边框样式为实线*/
border-style: solid;
/*边框宽度*/
border-width: 30px;
/*边框颜色粉色*/
border-color: pink;
/*其他不需要的方向颜色设置为透明*/
border-top-color: transparent;
border-right-color: transparent;
border-left-color: transparent;
}
既然宽高设置为0就能得到三角形，那么给宽高设置一定的数值就可以得到梯形了
css中修改
div{
width: 40px;
height: 40px;
}
梯形.jpg
