一.用border实现
首先我们可以通过下面的代码来认识border的表现形式。
//html:
<div id="container"></div>
//css
#container{
width: 50px;
height:50px;
border-top:solid 24px red;
border-bottom:solid 24px yellow;
border-left: solid 24px green;
border-right:solid 24px blue;
}
运行结果：
image.png
以上代码我们让盒子的上下左右边分别为不同的颜色，发现border竟然是由四个梯形组成的！！那么如果我们的盒子没有content呢？现在我们把盒子的宽高设为0，看下效果。
#container{
width: 0px;
height:0px;
border-top:solid 24px red;
border-bottom:solid 24px yellow;
border-left: solid 24px green;
border-right:solid 24px blue;
}
运行结果：
image.png
所以我们可以通过设置盒子的宽高为零，再通过控制其border来画我们想要的三角形
我们实现一个向下的三角形：除了border-top有颜色，其余的边设置颜色为透明。
#container{
width: 0px;
height:0px;
border-top:solid 24px red;
border-bottom:solid 24px transparent;
border-left: solid 24px transparent;
border-right:solid 24px transparent;
}
运行结果：
image.png
