CSS实现树谱图

树谱图的实现，是利用列表嵌套的原理，折线使用伪类::before及::after实现。

    

        

            
0
            

                

                    
1
                    

                        

                            
1-1
                        
                        

                            
1-2
                        
                        

                            
1-3
                        
                        

                            
1-4
                        
                    
                
                

                    
2
                
                

                    
3
                    

                        

                            
3-1
                        
                    
                
            
        
    

*{margin: 0;padding: 0;}
ul,li{list-style: none;}
.dv{width: 90px;height: 145px;border: 1px solid #ccc;display: inline-block;font-size: 16px;position: relative;}
ul{overflow: hidden;padding-top: 20px;position: relative;}
li{float: left;text-align: center;position: relative;padding: 20px 5px 0 5px;font-size: 0;}
.tree li:only-child{padding: 0;}
.tree ul ul::before{content: "";position: absolute;left: 50%;top: 0;width: 0;height: 20px;border-left: 1px solid #ccc;}
li::before{content: "";position: absolute;right: 50%;top: 0;width: 50%;height: 20px;border-top: 1px solid #ccc;}
li::after{content: "";position: absolute;right: 50%;top: 0;width: 50%;height: 20px;border-top: 1px solid #ccc;}
li::after{left: 50%;top: 0;right: 0;
    border-left: 1px solid #ccc;
}
li:first-child::after{border-radius: 5px 0 0 0;}
.treeul li:first-child::before,.treeul li:last-child::after{border:none}
.treeul li:last-child::before{border-right:1px solid #ccc;border-radius: 0px 5px 0 0;}
.treeul li:only-child::before{border: none;}