xizhenghe

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连这再有时画图需要换方式。

分类:

技术点:

相关文章:

  • 2021-11-20
  • 2022-01-14
  • 2021-08-23
  • 2021-11-19
  • 2021-04-09
  • 2021-11-20
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2022-12-23
  • 2021-12-24
  • 2021-10-13
  • 2021-08-31
  • 2021-11-20
  • 2021-08-26
相关资源
相似解决方案