纯CSS与HTML实现垂直时间轴

原创YouTube

---

HTML源码

    
    
    
    
    



    

        

            

            

                2019
            
            

                
演示标题
                
Phd in computer science
                
简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介
            
        
        

            

            

                2018
            
            

                
演示标题
                
Phd in computer science
                
简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介
            
        
        

            

            

                2017
            
            

                
演示标题
                
演示子标题
                
简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介
            
        
        

            

            

                2016
            
            

                
演示标题
                
演示子标题
                
简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介
            
        
        

            

            

                2015
            
            

                
演示标题
                
演示子标题
                
简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介
            
        
        

            

            

                2014
            
            

                
演示标题
                
演示子标题
                
简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介
            
        
        

            

            

                2013
            
            

                
演示标题
                
演示子标题
                
简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介
            
        
        

            

            

                2012
            
            

                
演示标题
                
演示子标题
                
简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介
            
        
        

            

            

                2011
            
            

                
演示标题
                
演示子标题
                
简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介
            
        
        

            

            

                2010
            
            

                
演示标题
                

                
简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介简介
            
        
    

---

CSS源码

* {
    box-sizing: border-box;
}

.wrapper {
    font-family: roboto;
    display: flex;
    flex-wrap: wrap;
    max-width: 800px;
    margin: 0 auto;
}

.box-area {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    width: 100%;
}

.box-date {
    display: flex;
    /* 原来是用渐变做的直线 */
    background: linear-gradient(to right, #fff 45%, #000 45%, #000 45%, #fff 50%);
    order: 2;
    text-align: center;
    font-size: 28px;
    flex-basis: 100px;
    color: #fff;
}

.box-date>span {
    font-size: 20px;
    padding: 10px;
    margin: auto;
    background: #000;
}

.box-text {
    text-align: center;
    padding: 20px;
    border-radius: 25px;
    color: #45f3ff;
    order: 3;
    width: 80%;
    padding-left: 10px;
    background: #000;
    margin-bottom: 3%;
}

.box-text h2 {
    margin: 0;
    font-size: 14px;
    text-transform: uppercase;
}

.box-text h3 {
    margin: 5px;
    font-size: 14px;
    color: #45f3ff;
}

@media(min-width:640px) {
    .box-text,
    .custom {
        width: 40%;
    }
    .box-right .box-text {
        order: 1;
        padding-right: 10px;
        border-radius: 25px;
    }
    .box-right .custom {
        order: 3;
    }
}

---

效果展示