为了方便用border做三角形，省去那繁琐的思考三角朝向的问题，自己搞了个小口诀，分两篇，一篇是普通的三角，一篇是针对直角三角，口诀如下：
普通篇：
方向朝哪哪边无，
颜色反向来弥补
直角三角篇：
直角三角分两边，
哪侧无值朝哪边，
具体颜色来填充，
要看直角在哪边，
向上直角填上边，
向下直角填下边，
top、bottom俩冤家，
从此永远不想见。
针对普通篇的效果如下：
代码如下：
.toLeft { ???????????????width: 0; ???????????????height: 0; ???????????????border-width: 30px 50px 30px 0; ???????????????border-style: solid; ???????????????border-color: transparent #007AFF transparent transparent; ???????????}demo解析：因为方向朝左，所以左侧值为0，因为方向朝左，颜色填充的是在右边，符合口诀，嘿嘿，smell。其他的就不详细说明了，直接上效果，如下：
代码如下：
.toRight { ???????????????width: 0; ???????????????height: 0; ???????????????border-width: 30px 0 30px 50px; ???????????????border-style: solid; ???????????????border-color: transparent transparent transparent #007AFF; ???????????} ???????????.toTop { ???????????????width: 0; ???????????????height: 0; ???????????????border-width: 0 30px 50px 30px; ???????????????border-style: solid; ???????????????border-color: transparent transparent #007AFF transparent; ???????????} ???????????.toBottom { ???????????????width: 0; ???????????????height: 0; ???????????????border-width: 30px 30px 0 50px; ???????????????border-style: solid; ???????????????border-color: #007AFF transparent transparent transparent; ???????????}直角三角demo效果：
代码如下：
.straightLeftTop { ???????????????width: 0; ???????????????height: 0; ???????????????border-width: 100px 50px 0 0; ???????????????border-style: solid; ???????????????border-color: #0062CC transparent transparent transparent; ???????????}demo解析：这个直角三角的角是在左上的，根据口诀分析，哪边无值在哪边，左侧无值，正确；颜色填充呢，还是因为直角的位置关系，因为，直角在上边，所以颜色填充的位置在上边，正确，还是因为直角的关系，因为直角在上边的，所以bottom无值，从此永远不相见，正确。其他例子如下：
代码如下：
.straightRightTop { ???????????????width: 0; ???????????????height: 0; ???????????????border-width: 100px 0 0 50px; ???????????????border-style: solid; ???????????????border-color: #0062CC transparent transparent transparent; ???????????} ???????????.straightLeftBottom { ???????????????width: 0; ???????????????height: 0; ???????????????border-width: 0 50px 100px 0; ???????????????border-style: solid; ???????????????border-color: transparent transparent #0062CC transparent; ???????????} ???????????.straightRightBottom { ???????????????width: 0; ???????????????height: 0; ???????????????border-width: 0 0 100px 50px; ???????????????border-style: solid; ???????????????border-color: transparent transparent #0062CC transparent; ???????????}在自己不懂之前参考过的网址，感谢他们：http://www.cnblogs.com/blosaa/p/3823695.html
转载请注明出处，thank you！
使用CSS border 做三角形 口诀赠上
原文地址：https://www.cnblogs.com/zxn-9588/p/8557835.html