最近遇到了问题就是画推进条类似于
开始想直接在网页上保存图片可是这是人家div的背景不知道是图片还是也用的border边框,以前研究过border画三角形这次想自己画推进条试试,感觉这次基本上搞通了border画三角形,这里先讲我总结的原则再讲例子。
首页我搞懂了border-top:50px solid red;50px指的哪?指的是边框的最外层边到元素本身边的距离,这里需要知道边框的宽度和元素的宽度是无关的,如图2-4指的是边框的宽度二4-5是元素本身宽度,再就是画三角形最关心的是斜边就是1-4和3-5,从图中可以看出当相邻的边框(左上,左下,右上、右下)同时存在时,元素相应方位(4的位置)到两个边框的交点(1)的线段就是两个边框的分界线,这样两个边框形成了平分,那么如果相邻边框只有一个框时怎么办呢?比如图中没有红色的左边框时,那看下图的效果
最后注意一点斜线只会外扩就像1-4连而不是4-3连这再有时画图需要换方式。