CSS 制作三角形原理剖析

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

1、html代码如下

<div class="triangle">
</div>

2、CSS代码

.triangle{

width: 200px;
height: 200px;
border: solid 40px red;
}

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



3、下面改变个边框颜色

.triangle{

width: 200px;
height: 200px;
border-bottom: solid 40px #0000FF;
border-top: solid 40px #000000;
border-right: solid 40px #FF0000;
border-left: solid 40px #00FF00;
}

显示效果如下



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

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

.triangle{

width: 200px;
height: 200px;
border-bottom: solid 40px #0000FF;
border-right: solid 40px #FF0000;
border-left: solid 40px #00FF00;
}

显示效果如下



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

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

.triangle{

width: 150px;
height: 90px;
border-bottom: solid 40px #0000FF;
border-top: solid 40px #000000;
border-right: solid 40px #FF0000;
border-left: solid 40px #00FF00;
}

显示效果如下



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

.triangle{

width: 0;
height: 0;
border-bottom: solid 40px #0000FF;
border-top: solid 40px #000000;
border-right: solid 40px #FF0000;
border-left: solid 40px #00FF00;
}

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

.triangle{

width: 0;
height: 0;
border-bottom: solid 40px transparent;
border-top: solid 40px #000000;/*只留上边框有颜色，其他边框透明*/
border-right: solid 40px transparent;
border-left: solid 40px transparent;
}