原理:画一个div，给div的宽高为0，给4个border属性，把其中三个隐藏就可以得到一个三角形。
很简单的一个原理，项目中可能很少用到，业余可以玩玩，其实前端蛮好玩的。可以实现各种各样的功能。
css:
1 .test1 { 2 width: 0; 3 height: 0; 4 border-right: 50px solid transparent; 5 border-bottom: 50px solid blue; 6 border-left: 50px solid transparent; 7 }
html:
1 <div class="test1"></div>
全部代码：
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta charset="UTF-8"> 6 <title></title> 7 </head> 8 <!--/*1.css样式*/--> 9 <style type="text/css"> 10 .test1 { 11 width: 0; 12 height: 0; 13 border-right: 50px solid transparent; 14 border-bottom: 50px solid blue; 15 border-left: 50px solid transparent; 16 } 17 18 .test2 { 19 width: 0; 20 height: 0; 21 border-top: 50px solid transparent; 22 border-bottom: 50px solid transparent; 23 border-left: 50px solid orange; 24 } 25 26 .test3 { 27 width: 0; 28 height: 0; 29 border-top: 50px solid black; 30 border-right: 50px solid transparent; 31 border-left: 50px solid transparent; 32 } 33 34 .test4 { 35 width: 0; 36 height: 0; 37 border-top: 50px solid transparent; 38 border-right: 50px solid red; 39 border-bottom: 50px solid transparent; 40 } 41 </style> 42 43 <body> 44 <!--2.html样式--> 45 <div class="test1"></div> 46 <div class="test2"></div> 47 <div class="test3"></div> 48 <div class="test4"></div> 49 </body> 50 51 </html>
2018年1月9日，今天小马哥变成我们的顾问了。不是再是我们的老大了。嗯，还可以吃一顿饭。
是不是要变的成熟点了，骚年。