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

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

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

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

html border画三角形的更多相关文章

  1. 用CSS的border画三角形

    用border画三角形,实际上属于一种奇淫巧技. 利用的是border的一个特性:当一个元素的宽高都为0时,给border设置宽度(至少给2个相邻的边框设置宽度),border就会撑开这个元素. 四个 ...

  2. css中border画三角形

    <!doctype html><html lang="en"> <head>  <meta charset="UTF-8&quo ...

  3. CSS深入了解border:利用border画三角形等图形

    三角形实际上是border的产物 我们正常使用的border都是四边一个颜色,当我们把四边换上不同颜色 那么你就会发现,三角来了~! <!DOCTYPE html> <html la ...

  4. 利用Border画三角形

    边框 1.边框其实并不是矩形,而是梯形 2.利用边框画三角形: div.a{ width:0px; height:0px; border:10px white solid; border-top-co ...

  5. 【前端小技巧】利用border画三角形及梯形

    border是围绕元素内容和内边距的一条或多条线,border 属性允许你规定元素边框的样式.宽度和颜色 值: border-width 粗细 none/hidden/solid/dashed/dot ...

  6. 利用css的border实现画三角形思路原理

    1.利用Css 的border绘制三角形的原理: div的border是有宽度和颜色的,当div的宽度比较大的时候,比如上面代码每个边100像素,颜色又不一样,浏览器怎么渲染颜色呢?经测试发现,宽度较 ...

  7. css3画三角形的原理

    以前用过css3画过下拉菜单里文字后面的“下拉三角符号”,类似于下面这张图片文字后面三角符号的效果 下面是一个很简单的向上的三角形代码 #triangle-up { width: 0; height: ...

  8. 菱形实现气泡Bubble,菱形画箭头,菱形画三角形

    菱形实现气泡Bubble,菱形画箭头,菱形画三角形 >>>>>>>>>>>>>>>>>>&g ...

  9. CSS画三角形引发的一些思考

      今天刷知乎时看到了一个问题,有谁能详细讲一下css如何画出一个三角形?怎么想都想不懂? - 知乎.很巧,刚入前端坑的我前不久也遇到过这个问题,今天再来谈一谈这个问题则是因为知乎的一些答案引发了我的 ...

随机推荐

  1. C++ - 模板(template)中typename的使用方法

    声明template参数时, 前缀关键字class和typename可以互换; 使用关键字typename标识嵌套从属类型名称, 但不需在基类列表和成员初始化列表内使用. 从属名称(dependent ...

  2. day 84 Vue学习四之过滤器、钩子函数、路由、全家桶等

      本节目录 一 vue过滤器 二 生命周期的钩子函数 三 vue的全家桶 四 xxx 五 xxx 六 xxx 七 xxx 八 xxx 一 Vue的过滤器 1 moment.js 在这里我们先介绍一个 ...

  3. hadoop环境搭建-伪分布模式

    Appache hadoop 版本:2.77   jdk:1.8  系统:centos7 注意不要在root下解压,要单独建一个用户安装hadoop及其组件. 一.先查看系统是否有自带j #dk: r ...

  4. pandas:apply和transform方法的性能比较

    1. apply与transform 首先讲一下apply() 与transform()的相同点与不同点 相同点: 都能针对dataframe完成特征的计算,并且常常与groupby()方法一起使用. ...

  5. 洛咕 P2494 [SDOI2011]保密

    出题人没素质啊,强行拼题还把题面写得又臭又长. 简单题面就是有一张图,每条边有两个权值\(t,s\),有无限支军队,一支军队可以打一个点,代价是从n到这个点的路径的\(\frac{\sum t}{\s ...

  6. JAVAWEB servlet和jsp的权限访问控制

    要想防止用户直接访问某个页面,那么就需要要求他带着session来访问,我们才让他访问,所以登录时设置的session就用上了 在用户没有session时,访问servlet或者jsp时直接重定向页面 ...

  7. mysql查询操作之单表查询、多表查询、子查询

    一.单表查询 单表查询的完整语法: .完整语法(语法级别关键字的排列顺序如下) select distinct 字段1,字段2,字段3,... from 库名.表名 where 约束条件 group ...

  8. Java中getConstructors()、getDeclaredConstructors()、getConstructor(Class<?>... parameterType)、getDeclaredConstructor(Class<?>... parameterType)的区别

    区别一 在方法名末尾有s的是返回一个数组,没有s的是返回单个构造器. 区别二 在方法名中加Declared的是返回所有的构造方法,不加Declared的只返回public访问权限的构造器 区别三 有参 ...

  9. Python无参装饰器

    需求:想要在test_func函数前后执行一些代码   1.第一步(定义函数,将调用原函数,使用新函数替换) def test_func(): return 'test_func' def test_ ...

  10. Session里存的密码或其他信息如何获取。

    1.首先找到登陆界面,看给session里存的是什么,是以什么格式去存的(个人这边是commonAction): 2.其次在需要的界面进行获取,拿出想要的密码或其余值.(密码可能是加密过的,如想做密码 ...