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;
}