Diagonal cascading elements and 90º borders (cause-and-effect diagram like) for fishbone list using HTML, CSS and/or Javascript

Question

I organized some divs and paragraphs to create six different lists, all of them connected to a single arrow. I was already able to create something that looks like a fishbone diagram, as you guys can see in the example below:

The gray (bg-secondary class) divs are dynamically added. Six divs have two blue borders inside a col (to simulate a 90º separator between them)

What I am really struggling to achieve now is the diagonal borders and cascading lists that looks like this:

The second image was poorly edited inside Paint, but the difference is that: Instead of 90º borders, I have a diagonal one, simulating a 45º separator. Besides that, I also have the lists indented (the margin increases according to the number of items).

I have no idea of how I can achieve the 45º borders. The fact that I added those margin-right styles also made the divs smaller. What would you guys suggest?



    
        
        
        
        

        
    
    
        

        
             
                
                     
                        
                            
                                Materials
                                
                                    

                                        
                                    
                                
                                
                                    

                                        
                                    
                                
                            

                            
                                Method
                                
                                    

                                        
                                    
                                
                                
                                    

                                        
                                    
                                
                                
                                    

                                        
                                    
                                
                                
                                    

                                        
                                    
                                
                            

                            
                                Man Power
                                
                                    

                                        
                                    
                                
                                
                                    

                                        
                                    
                                
                                
                                    

                                        
                                    
                                
                            
                        
                    
                
            

        


        
                
                
                    
                    
                

            

        



        
             
                
                     
                        
                            
                                Machine
                                
                                    

                                        
                                    
                                
                                
                                    

                                        
                                    
                                
                                
                                    

                                        
                                    
                                
                                
                                    

                                        
                                    
                                
                                
                                    

                                        
                                    
                                
                                
                                    

                                        
                                    
                                
                            

                            
                                Mother Nature
                            

                            
                                Measurement

user_4457914 · Answer

You can achieve it by adding ::before to place a diagonal line and ::after to hide the specific part diagonally.

If you add this to CSS:

.m-top-half-border {
  position: relative;
  overflow: hidden;
}

.m-top-half-border::before {
  content: "";
  position: absolute;
  border: 4px solid #23468c;
  height: 100%;
  right: 77px;
  top: 0;
  background: white;
  z-index: 2;
  transform: skew(25deg, 0deg);
}
.m-top-half-border::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 191px;
  right: -97px;
  top: 0;
  background: white;
  transform: skew(25deg, 0deg);
}

.m-bottom-half-border {
  position: relative;
  overflow: hidden;
}

.m-bottom-half-border::before {
  content: "";
  position: absolute;
  border: 4px solid #23468c;
  height: 100%;
  right: 104px;
  top: 0;
  background: white;
  z-index: 2;
  transform: skew(-25deg, 0deg);
}
.m-bottom-half-border::after {
  content: "";
  position: absolute;
  height: 100%;
  width: 198px;
  right: -76px;
  top: 0;
  background: white;
  transform: skew(-25deg, 0deg);
}

user_9239975 · Answer

Could you find out how to do it?

I think giving a full solution is a bit of work, but if that helps, I used the code you provided to create a starting point for you to continue the coding.


.m-bottom-half-border {
  position: relative; /* Makes the content relative to use the ::after */
}

/* Use ::after to avoid create new HTML elements */
.m-bottom-half-border::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0; /* Right and top to keep your line to the right */
    height: 150%;
    transform: rotate(45deg) translateX(150%); /* Here you create the rotation of 45 degrees and move to the right to avoid this crashes the content */
    transform-origin: top; /* This is to keep it centered while rotating */
    border: 4px solid red;
    background: red;
    border-bottom: 8px solid;
    border-right: 8px solid;
}

Diagonal cascading elements and 90º borders (cause-and-effect diagram like) for fishbone list using HTML, CSS and/or Javascript

2 Answers