css使用grid实现时序图效果代码
代码语言:html
所属分类:图表
代码描述:css使用grid实现时序图效果代码,采用css-grid属性结合div实现,无js代码。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> html { font-size: calc(1vw + .5rem); } body { font-family: sans-serif; margin: 1em; } .note { text-align: center; font-style: italic; } @supports (display:grid) { ol { padding: 0; display: grid; grid-template-columns: repeat(10, 1fr); list-style-type: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='121' height='10'><rect x='60' y='0' width='1' height='10'/></svg>"); background-size: calc(100% / 5) auto; background-position: top left; position: relative; } li { margin: 1em 0 1em; display: flex; align-items: center; text-align: center; justify-content: center; } li[on] { border: 1px solid black; background: #fff; margin: .3em 1em; padding: .25em .25em .1em .25em; } li[from] { background: linear-gradient( to top, #fff 0px, #000 0px, #000 .1em, #fff .1em ); background-size: calc(100% - 8px) 100%; background-repeat: no-repeat; background-position: center top; padding: .3em 0 .4em; margin-left: 4px; margin-right: 4px; position: relative; } li[from]:after { content: ''; display: block; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10' ><path d='M5,0 L10,5 5,10z'/></svg>"); background-repeat: no-repeat; width: .75em; height: .75em; position: absolute; bottom: 0; right: 0px; transform: translateY(calc(50% - .05em)); } li[break] { grid-column: 1/11; margin: 1em 2em; background: #fff; padding: 1em 0; border-top: 1px dashed black; border-bottom: 1px dashed black; text-align: center; } li[back]:after { transform: translateY(calc(50% - .05em)) scale(-1,1); left: 0px; } .........完整代码请登录后点击上方下载按钮下载查看
网友评论0