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