84669 人学习
152542 人学习
20005 人学习
5487 人学习
7821 人学习
359900 人学习
3350 人学习
180660 人学习
48569 人学习
18603 人学习
40936 人学习
1549 人学习
1183 人学习
32909 人学习
如下图
将每四个圈看作一个矩形的四个顶点,虚线则可以用 border-style dashed 来实现。
然后整个页面就是由一个个这样的矩形竖向堆起来,每个矩形里放两个顶点,分别绝对定位放到矩形的左上角和右上角。
https://codepen.io/straybugs/...
没有纯横竖的递进关系,看起来十分别扭。 各层的关系不是用指针去关联而是看下面的步数,差评。 而且出现两个暗背景流程说明,不知用意总体体验太差,尤其说明流程左右太狭隘,好影响用户的关注。
background-imagecanvas伪类
如果固定宽度我可能会把线条丢到背景里去,哈哈哈
width || height : calc 动态计算线条宽度, 这个黑色线条可以使用伪元素,::before ::after 他们的父类都是宿主元素. canvas我感觉有点大材小用,用css完全可以实现。
1.带图切是一种办法。2.或者用布局的额外p做定位,用border:1px dashed #000,来做样式。。即可。3.用css伪类来实现。
如果是IE8以后的浏览器用伪类来实现
p:after { content : ""; display : block; position:absolute; background : url(); //把图片换好就行,如果支持css3的话一张图片就行了,可以自行旋转 }
如果兼容以前的浏览器就只能用p来模拟一波了,看你个人需求。
支持用 canvas 的同学,退一步可以用图片来切图。
先使用ul li float浮动,再写一个类.bg{position:relitive},写俩个伪类,分别为横线和竖线,根据设计稿进行定位就好了
将每四个圈看作一个矩形的四个顶点,虚线则可以用 border-style dashed 来实现。
然后整个页面就是由一个个这样的矩形竖向堆起来,每个矩形里放两个顶点,分别绝对定位放到矩形的左上角和右上角。
https://codepen.io/straybugs/...
没有纯横竖的递进关系,看起来十分别扭。
各层的关系不是用指针去关联而是看下面的步数,差评。
而且出现两个暗背景流程说明,不知用意
总体体验太差,尤其说明流程左右太狭隘,好影响用户的关注。
background-image
canvas
伪类
如果固定宽度我可能会把线条丢到背景里去,哈哈哈
width || height : calc 动态计算线条宽度, 这个黑色线条可以使用伪元素,::before ::after 他们的父类都是宿主元素. canvas我感觉有点大材小用,用css完全可以实现。
1.带图切是一种办法。
2.或者用布局的额外p做定位,用border:1px dashed #000,来做样式。。即可。
3.用css伪类来实现。
如果是IE8以后的浏览器用伪类来实现
如果兼容以前的浏览器就只能用p来模拟一波了,看你个人需求。
支持用 canvas 的同学,退一步可以用图片来切图。
先使用ul li float浮动,再写一个类.bg{position:relitive},写俩个伪类,分别为横线和竖线,根据设计稿进行定位就好了