CSS利用border绘制三角形

题外话：在网上搜索"css绘制三角形"的结果都是基本上直接上代码和效果图，或者从矩形效果到三角形，都没有说到原理！！！难道只有我一个人奇怪两条相邻的有宽度的border相交竟然是个三角形而不是矩形吗？！基本上没有人解释这个点，说实话对于初学者来说这真的是挠心挠肺·······

div的border是有宽度和颜色的，当div的宽度比较大的时候，颜色又不一样，浏览器怎么渲染颜色呢？经测试发现，宽度较大的border相交时：

• 1、只有临边才会相交, 对边时不会相交的
• 2、相交区域(显然时矩形)按照对角线划分成两个三角形，两个三角形分别渲染成两个边的颜色，不会出现重叠的情况
• 3、调整四个边的宽度，加上中间区域的宽度，配以不同颜色和透明，各种简单多边形(举一反三)已经不在话下了

循序渐进~~~

1、抛砖引玉1

#box{
            height: 100px;
            width: 100px;
            border-style: solid;
            border-width: 100px 100px 100px 100px;
            border-color: red forestgreen blue cyan;       
        }

抛砖引玉1.png

2、抛砖引玉2

#box{
            height: 0px;
            width: 0px;
            border-style: solid;
            border-width: 100px 100px 100px 100px;
            border-color: red forestgreen blue cyan;       
        }

抛砖引玉2.png

3、抛砖引玉3

#box{
            height: 0px;
            width: 0px;
            border-style: solid;
            border-width: 100px 100px 100px 100px;
            border-color:  transparent transparent blue transparent;
        }

抛砖引玉3.png

这样其实三角形已经出来了，但是审查元素一看，问题就出来了：
虽然其它三个边都隐藏了，位置还在，怎么把多余的位置去掉呢？

问题.png

4、抛砖引玉4
试着修改下边框的宽度（宽度值对应：top right bottom left）：

先把boder-width第一个值改为50px试试：

#box{
            height: 0px;
            width: 0px;
            border-style: solid;
            border-width: 50px 100px 100px 100px;
            border-color:  transparent transparent blue transparent;
        }

复制前.png

复制后.png

发现上面多余的地方少了一半，设置border-width第一个值为0px试试：

#box{
            height: 0px;
            width: 0px;
            border-style: solid;
            border-width: 0px 100px 100px 100px;
            border-color:  transparent transparent blue transparent;
        }

triangle.png

查看元素已经完全是三角形的高度了,至此三角形就完成了

敲黑板！！！总结一下

再看下上面的图：

分析图1.png

就以蓝色的三角形为例，它的高度，就是css中设置的100px。那它的底边的长度和其它两个边的长度怎么来的呢？

分析图2.png

蓝色三角形（bottom）其实从它的顶点垂直下来一条线为准，将蓝色三角形分为左右两个小三角形，左边小三角形底边受left值影响，右边小三角形底边受right值影响。

其它一样：

top最长边=left值+right值=200px

left最长边=top值+bottom值=200px

明白以上关系，就能随便绘制什么三角形了，如将蓝色三角形渲染为直角三角形（还是以上面代码为例）：

#box{
            border-style: solid;
            border-width: 0px 0px 100px 100px;
            border-color: transparent transparent blue transparent;
            width: 0px;
            height: 0px;
}

最后一张