CSS 制作三角形原理剖析
使用css制作三角形其实原理很简单，下面一步步解析。
1、html代码如下
1 <div class="triangle"> 2 </div>
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
