CSS 纵向树 横向树

1、最近要做一个横向树的功能，在网上找了一个纵向树的模板，代码如下。

      .tree-diagram ul {
		    display: flex;
		    position: relative;
		
		    /* Reset ul 样式*/
		    list-style-type: none;
		    margin: 0;
		    padding: 1rem 0.5rem 0rem 0.5rem;
		}
		
		.tree-diagram ul ul::before {
		    border-right: 1px solid rgba(0, 0, 0, .3);
		    content: '';
		    
		    /* Position */
		    position: absolute;
		    top: 0;
		    right: 50%;
		
		    /* Size */
		    height: 1rem;
		    width: 50%;
		}

		.tree-diagram li {
			  display: flex;    
		    flex-direction: column;
		    padding: 1rem 0.5rem 0rem 0.5rem;
		    position: relative;
		
		    /* Center the content */
		    align-items: center;
		}
		
		.tree-diagram li::before {
		    border-right: 1px solid rgba(0, 0, 0, .3);
		    border-top: 1px solid rgba(0, 0, 0, .3);
		    content: '';    
		
		    /* Position */
		    position: absolute;
		    top: 0;
		    right: 50%;
		
		    /* Size */
		    height: 1rem;
		    width: 50%;
		}
		
		.tree-diagram li::after {
		    border-top: 1px solid rgba(0, 0, 0, .3);
		    content: '';
		
		    /* Position */
		    position: absolute;
		    top: 0;
		    right: 0;
		
		    /* Size */
		    width: 50%;
		}
		
		.tree-diagram li:first-child::before, .tree-diagram li:last-child::after {
		    /* Remove the top of border from the first and last items */
		    border-top: none;
		}
		
		/* Add a root item if you want */
		li.tree-diagram_root{
				padding: 0;
		}
		li.tree-diagram_root::before {
		    border-right: none;
		}

<div class="tree-diagram">
    <ul>
        <li class="tree-diagram_root">
            root
            <ul>
                <li>
                    ..22
                    <ul>
                        <li>..33</li>
                        <li>..44</li>
        
                    </ul>
                </li>
                <li>..55</li>
            </ul>
        </li>   
    </ul>
</div>

效果：

2、在此基础上修改了横向树，并增加了折线的圆角效果，代码如下：

      .tree-diagram ul {
		    display: flex;
        	flex-direction: column;
		    position: relative;
		
		    /* Reset ul 样式*/
		    list-style-type: none;
		    margin: 0;
		    padding: 2px 0 2px 60px;
            
		}
		
		.tree-diagram ul ul::before {
		    border-top: 2px solid #a0a0a0;
		    content: '';
		    
		    /* Position */
		    position: absolute;
		    bottom: 0;
		    left: 0;
		
		    /* Size */
		    width: 60px;
		    height: 50%;
		}
		
		.tree-diagram li {
			  display: flex;
		    padding: 2px 0 2px 60px;
		    position: relative;
		
		    /* Center the content */
		    align-items: center;
		}
        
		.tree-diagram li::before {
		    border-left: 2px solid #a0a0a0;
		    border-bottom : 2px solid #a0a0a0;
		    content: '';    
		
		    /* Position */
		    position: absolute;
		    left:0;
		    bottom: 50%;
		    
		
		    /* Size */
		    width: 60px;
		    height: 50%;
		}
		
		.tree-diagram li::after {
		    border-left: 2px solid #a0a0a0;
		    content: '';
		
		    /* Position */
		    position: absolute;
		    left: 0;
		    bottom: 0;
		
		    /* Size */
		    width: 60px;
		    height: 50%;
		}
		
	 .tree-diagram li:first-child::before,.tree-diagram li:last-child::after {
		    /* Remove the top of border from the first and last items */
		    border-left: none;
		}
		
		.tree-diagram li:last-child::before {
		    /* Remove the top of border from the first and last items */
				border-bottom-left-radius:4px;
		}
		.tree-diagram li:first-child::before {
		    /* Remove the top of border from the first and last items */
		    border-bottom: none;
		}
		.tree-diagram li:not(.tree-diagram_root):first-child::after {
		    /* Remove the top of border from the first and last items */
		    border-top:  2px solid #a0a0a0;
				border-top-left-radius:4px;
		}

<div class="tree-diagram">
    <ul>	
        <li class="tree-diagram_root">
            root.
            <ul>
                <li>
                    22
                   <ul>
                        <li>33</li>
                        <li><span style="padding: 20px 10px">XX</span></li>
                        <li>44</li>
                    </ul>
                </li>
                <li>55</li>
            </ul>
        </li>
</div>

效果：