最近给移动端写接口，写完了才告诉我其中两个页面是H5的，需要我这边来做。本着“我是公司一块砖，哪里需要哪里搬”的原则，让做就做。结果一看原型，还有时间轴效果。第一反应：找度娘，找github，找oschina~~~确实也有不少的时间轴插件，但是总觉得都太花哨了，大道至简，自己来一个吧。

Talk is cheap,show me the code!

先上最终效果图

简单到爆炸的页面

准备工作

两张图片，1：小圆点，2：左边的一根竖线

开始撸代码

html代码

     
    
      
时间轴
    
      
        
       
            
        
                
                     
        
            
                    
        
                
         
                    
          
           我的2017
                          
         
                
         
                    
          
           吃饭睡觉写代码
          
                    
          2017-12-16 08:08:08                
         
            
        
        
       
        
       
            
        
                
                     
        
            
                    
        
                
         
                    
          
           我的2016
                          
         
                
         
                    
          
           吃饭睡觉写代码
          
                    
          2016-12-16 08:08:08                
         
            
        
        
       
    
      
     

css样式

body {        text-align: center;        font-size: 14px;        line-height: 1.5rem;        margin: auto;    }    .timeline {        position: relative;        text-align: left;    }    .timeline::before {        content: '';        position: absolute;        top: 0;        left: 18px;        height: 100%;        width: 2px;        background: url("/images/v-line.png");    }    .ctimeline-img {        position: relative;        left: 12px;        top: 15px;        width: 13px;        height: 13px;    }    .cd-date {        font-size: 12px;        color: #cccccc;    }    .item {        float: left;        clear: both;        margin-bottom: 23px;    }    /* 向上的箭头 */    .dot-top {        position: relative;        top: 21px;        left: 3rem;        font-size: 0;        line-height: 0;        border: 10px dashed #eeeeee;        border-top-width: 0;        border-right-color: transparent;        border-bottom-style: solid;        border-left-color: transparent;    }    .msgBox {        border: 2px solid #eeeeee;        width: 100%;        padding: 2%;        margin-top: 2%;    }    .r-info {        position: relative;        top: 0px;        left: 30px;        width: 80%    }

其他说明

1、这是用的div效果，同时也可以用border-image的气泡效果实现