Diagonal cascading elements and 90º borders (cause-and-effect diagram like) for fishbone list using-CodePudding

The

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?

<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X 965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH 8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script> <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM B07jRM" crossorigin="anonymous"></script> <style> .arrow { width:100%; } .line { margin-top:14px; width:97%; background:#23468c; height:10px; float:left; } .point { width: 3%; height: 0; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 30px solid #23468c; float:right; } .m-top-half-border { border-top: 8px solid; border-right: 8px solid; border-image: linear-gradient(to left, #23468c 70%, transparent 30%) 30% 1; } .m-bottom-half-border { border-bottom: 8px solid; border-right: 8px solid; border-image: linear-gradient(to left, #23468c 70%, transparent 30%) 30% 1; } </style> </head> <body> <br> <div > <div > <div > <div > <div > <div > <h4 >Materials</h4> <p> <div style="margin-right: 140px;" > <div contenteditable="true" ></div> </div> </p> <p> <div style="margin-right: 70px;" > <div contenteditable="true" ></div> </div> </p> </div> <div > <h4 >Method</h4> <p> <div style="margin-right: 280px;" > <div contenteditable="true" ></div> </div> </p> <p> <div style="margin-right: 210px;" > <div contenteditable="true" ></div> </div> </p> <p> <div style="margin-right: 140px;" > <div contenteditable="true" ></div> </div> </p> <p> <div style="margin-right: 70px;" > <div contenteditable="true" ></div> </div> </p> </div> <div > <h4 >Man Power</h4> <p> <div style="margin-right: 210px;" > <div contenteditable="true" ></div> </div> </p> <p> <div style="margin-right: 140px;" > <div contenteditable="true" ></div> </div> </p> <p> <div style="margin-right: 70px;" > <div contenteditable="true" ></div> </div> </p> </div> </div> </div> </div> </div> </div> <div > <div style="white-space: nowrap;"> <div > <div ></div> <div ></div> </div> </div> </div> <div > <div > <div > <div > <div > <div > <h4 >Machine</h4> <p> <div style="margin-right: 70px;" > <div contenteditable="true" ></div> </div> </p> <p> <div style="margin-right: 140px;" > <div contenteditable="true" ></div> </div> </p> <p> <div style="margin-right: 210px;" > <div contenteditable="true" ></div> </div> </p> <p> <div style="margin-right: 280px;" > <div contenteditable="true" ></div> </div> </p> <p> <div style="margin-right: 350px;" > <div contenteditable="true" ></div> </div> </p> <p> <div style="margin-right: 420px;" > <div contenteditable="true" ></div> </div> </p> </div> <div > <h4 >Mother Nature</h4> </div> <div > <h4 >Measurement</h4> <p> <div style="margin-right: 70px;" > <div contenteditable="true" ></div> </div> </p> </div> </div> </div> </div> </div> </div> </body> </html>

CodePudding user response：

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); }

CodePudding user response：

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; }