CSS 竖线点时间节点

效果如图
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>竖线点时间节点</title>
</head>
<style>
.vertical-line {
height: 100px;
border-left: 2px solid;
margin-left: 4px;
border-image: -webkit-linear-gradient( #00eba7 , #08b8e6) 30 30;
border-image: -moz-linear-gradient( #00eba7 , #08b8e6) 30 30;
border-image: linear-gradient( #00eba7 , #08b8e6) 30 30;
}

.vertical-circle {
    float: left;
    width: 6px;
    height: 6px;
    border:2px solid white;
    background-color: #08b8e6;
    -webkit-border-radius: 100px;
}
.vertical-text{
    float:left;margin-top:-7px;
}
</style>
<body>
<div>
<div class="vertical-circle"></div><div class="vertical-text">2017.03.23 内容内容内容内容内容内容</div>
<div class="vertical-line"></div>
<div class="vertical-circle"></div><div class="vertical-text">2017.03.24 内容内容内容内容内容内容</div>
<div class="vertical-line"></div>
<div class="vertical-circle"></div><div class="vertical-text">2017.03.25 内容内容内容内容内容内容</div>
<div class="vertical-line"></div>
<div class="vertical-circle"></div><div class="vertical-text">2017.03.26 内容内容内容内容内容内容</div>

</div>
</div>
</body>
</html>
CSS 竖线 点 时间节点

CSS 竖线点时间节点
