首先我们在一个宽度和高度为0的div中设置它4边的border,如图1所示.
图1
从图1 我们就发现每跳边(border)都是我们我们要的三角形,那么离我们的要的结果很近啦.
现在我们尝试去掉上边的border,如图2所示.
图2
哇!去掉上边(border-top)后,我们发现左边和右边(boder-left&border-right)都被削去了一半.所以这里我们的结论是某一个边的存在会影响其相邻的边的表现形式.我又测试了去掉所有相邻的边只留对边结果就是什么都不显示了(这里我就不上图了).
所以我们要留下一个我们需要的三角形,我不能去掉其两个相邻的边,那么我们应该怎么做呢?
我们可以让其相邻的边存在但其颜色是透明的(transparent),如图3所示.
图3
我们要的三角形做出来啦!
接来下我们看看是什么决定三角形的特征,如图4所示.
图4.png
从图4我们不难看出.其本身(不透明的边)决定了三角形的高.
另外两个边(透明的边)的和决定了三角形的底边长.
