原理
其实很简单，就是将一个盒子的宽高设为零，然后设置四条边框的宽度，效果如下：
1
| <div class="triangle"></div>
|
1
2
3
4
5
6
7
8
| .triangle {
width: 0;
height: 0;
border-top: 70px solid red;
border-right: 70px solid green;
border-bottom: 70px solid blue;
border-left: 70px solid yellow;
}
|
只显示一个三角形，将另外三条边框隐藏（颜色改为 transparent 即可）：
总结
上述最后一个三角形的代码：
1
| <div class="triangle"></div>
|
1
2
3
4
5
6
| .triangle {
width: 0;
height: 0;
border: solid 70px;
border-color: transparent transparent blue transparent;
}
|
如果不想让隐藏的边框占有原来的位置，可以把 border-top 拿掉试试看。
1
2
3
4
5
6
7
| .triangle {
width: 0;
height: 0;
border-bottom: 70px solid blue;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
}
|