使用css制作三角形其实原理很简单，下面一步步解析。

1、html代码如下

1 
     
      2 
     

 2、CSS代码

1 .triangle{2     3     width: 200px;4     height: 200px;5     border: solid 40px red;6 }

 不错，这里显示是一个正方形，如下

3、下面改变个边框颜色

1 .triangle{2     3     width: 200px;4     height: 200px;5     border-bottom: solid 40px #0000FF;6     border-top: solid 40px #000000;7     border-right: solid 40px #FF0000;8     border-left: solid 40px #00FF00;9 }

 

显示效果如下

这里可能会感觉很奇怪，为什么四个角上的变成了斜的，下面在做一下变换

4、稍作变化，去掉上边框

1 .triangle{2     3     width: 200px;4     height: 200px;5     border-bottom: solid 40px #0000FF; 6     border-right: solid 40px #FF0000;7     border-left: solid 40px #00FF00;8 }

 

显示效果如下

可以看出，浏览器渲染时，针对边框角处理，以left和top为例说明：如果top 和left同时存在，各显示一部分；如果只有left,left边框才会显示为矩形角。

 

5、现在缩小div宽度和高度

1 .triangle{2     3     width: 150px;4     height: 90px;5     border-bottom: solid 40px #0000FF;6     border-top: solid 40px #000000;7     border-right: solid 40px #FF0000;8     border-left: solid 40px #00FF00;9 }

 

显示效果如下

可以理解，当宽度和高度同时变为0时，就是如下效果

1 .triangle{2     3     width: 0;4     height: 0;5     border-bottom: solid 40px #0000FF;6     border-top: solid 40px #000000;7     border-right: solid 40px #FF0000;8     border-left: solid 40px #00FF00;9 }

 

6、这时候如果只留一个边框有颜色，其他边框变成透明的话，就成了三角形了

1 .triangle{ 2      3     width: 0; 4     height: 0; 5     border-bottom: solid 40px transparent; 6     border-top: solid 40px #000000;/*只留上边框有颜色，其他边框透明*/ 7     border-right: solid 40px transparent; 8     border-left: solid 40px transparent; 9 }10