效果图：
代码：
1 <html> 2 <head> 3 <title>三角形</title> 4 </head> 5 <style> 6 .div1{ 7 width:0; 8 height:0; 9 background:red; 10 float:left; 11 border-bottom:100px solid #f40; 12 border-left:100px solid #fff; 13 border-right:100px solid #fff; 14 border-top:100px solid #fff; 15 } 16 .div2{ 17 width:0; 18 height:0; 19 float:left; 20 background:red; 21 border-bottom:100px solid #fff; 22 border-left:100px solid green; 23 border-right:100px solid #fff; 24 border-top:100px solid #fff; 25 } 26 .div3{ 27 width:0; 28 height:0; 29 float:left; 30 background:red; 31 border-bottom:100px solid #fff; 32 border-left:100px solid #fff; 33 border-right:100px solid #fff; 34 border-top:100px solid gray; 35 } 36 .div4{ 37 width:0; 38 height:0; 39 float:left; 40 background:red; 41 border-bottom:100px solid #fff; 42 border-left:100px solid #fff; 43 border-right:100px solid blue; 44 border-top:100px solid #fff; 45 } 46 </style> 47 <body> 48 <div class="div1"></div> 49 <div class="div2"></div> 50 <div class="div3"></div> 51 <div class="div4"></div> 52 </body> 53 </html>
实现思路：
将div标签的height和width值设为0，为div设置不为零的border值。
边框分为上下左右，以对角线划分，故可以的得到三角形。