html border画三角形

   最近遇到了问题就是画推进条类似于

开始想直接在网页上保存图片可是这是人家div的背景不知道是图片还是也用的border边框，以前研究过border画三角形这次想自己画推进条试试，感觉这次基本上搞通了border画三角形，这里先讲我总结的原则再讲例子。

 

首页我搞懂了border-top:50px solid red;50px指的哪？指的是边框的最外层边到元素本身边的距离，这里需要知道边框的宽度和元素的宽度是无关的，如图2-4指的是边框的宽度二4-5是元素本身宽度，再就是画三角形最关心的是斜边就是1-4和3-5，从图中可以看出当相邻的边框（左上，左下，右上、右下）同时存在时，元素相应方位（4的位置）到两个边框的交点（1）的线段就是两个边框的分界线，这样两个边框形成了平分，那么如果相邻边框只有一个框时怎么办呢？比如图中没有红色的左边框时，那看下图的效果

 最后注意一点斜线只会外扩就像1-4连而不是4-3连这再有时画图需要换方式。