先看效果图和代码:

FC3F9155-B566-4C29-9075-87707155F6DA.png
.triangle_up{
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.triangle_down{
width: 0;
height: 0;
border-top: 100px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
.triangle_left{
width: 0;
height: 0;
border-right: 100px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
.triangle_right{
width: 0;
height: 0;
border-left: 100px solid red;
border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
}
.float_left{
margin:20px;
float:left;
}
实现过程:

387AA397-EC3F-40FE-A4DC-BF23FD2C6560.png
1–对应样式
.triangle_up {
width: 100px;
height: 100px;
border-bottom: 50px solid red;
border-left: 50px solid green;
border-right: 50px solid yellow;
border-top: 50px solid blue;
}
2-对应样式
.triangle_up {
width: 0;
height: 0;
border-bottom: 50px solid red;
border-left: 50px solid green;
border-right: 50px solid yellow;
border-top: 50px solid blue;
}
3-对应样式
.triangle_up {
width: 0;
height: 0;
border-bottom: 50px solid red;
border-left: 50px solid green;
border-right: 50px solid yellow;
}
4-对应样式
.triangle_up {
width: 0;
height: 0;
border-bottom: 50px solid red;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
三角形画好后,调整boder 宽度可以随意改变三角形形状。当4中去掉boder-left属性后,可以绘制直角三角形,与设定 border-left: 0px solid transparent 效果一致。