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?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/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/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/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 class="row">
<div class="col-md-11">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-lg-4 m-top-half-border" >
<h4 class="text-center">Materials</h4>
<p>
<div style="margin-right: 140px;" class="bg-secondary">
<div contenteditable="true" class="btn-lg"></div>
</div>
</p>
<p>
<div style="margin-right: 70px;" class="bg-secondary">
<div contenteditable="true" class="btn-lg"></div>
</div>
</p>
</div>
<div class="col-lg-4 m-top-half-border" >
<h4 class="text-center">Method</h4>
<p>
<div style="margin-right: 280px;" class="bg-secondary">
<div contenteditable="true" class="btn-lg"></div>
</div>
</p>
<p>
<div style="margin-right: 210px;" class="bg-secondary">
<div contenteditable="true" class="btn-lg"></div>
</div>
</p>
<p>
<div style="margin-right: 140px;" class="bg-secondary">
<div contenteditable="true" class="btn-lg"></div>
</div>
</p>
<p>
<div style="margin-right: 70px;" class="bg-secondary">
<div contenteditable="true" class="btn-lg"></div>
</div>
</p>
</div>
<div class="col-lg-4 m-top-half-border" >
<h4 class="text-center">Man Power</h4>
<p>
<div style="margin-right: 210px;" class="bg-secondary">
<div contenteditable="true" class="btn-lg"></div>
</div>
</p>
<p>
<div style="margin-right: 140px;" class="bg-secondary">
<div contenteditable="true" class="btn-lg"></div>
</div>
</p>
<p>
<div style="margin-right: 70px;" class="bg-secondary">
<div contenteditable="true" class="btn-lg"></div>
</div>
</p>
</div>
</div>
</div>
</div>
</div><!-- ./col-md-11 -->
</div><!-- ./row -->
<div class="row">
<div class="col-md-12" style="white-space: nowrap;">
<div class="arrow">
<div class="line"></div>
<div class="point"></div>
</div><!-- ./arrow -->
</div><!-- ./col-md-12 -->
</div><!-- ./row -->
<div class="row">
<div class="col-md-11">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-lg-4 m-bottom-half-border" >
<h4 class="text-center">Machine</h4>
<p>
<div style="margin-right: 70px;" class="bg-secondary">
<div contenteditable="true" class="btn-lg"></div>
</div>
</p>
<p>
<div style="margin-right: 140px;" class="bg-secondary">
<div contenteditable="true" class="btn-lg"></div>
</div>
</p>
<p>
<div style="margin-right: 210px;" class="bg-secondary">
<div contenteditable="true" class="btn-lg"></div>
</div>
</p>
<p>
<div style="margin-right: 280px;" class="bg-secondary">
<div contenteditable="true" class="btn-lg"></div>
</div>
</p>
<p>
<div style="margin-right: 350px;" class="bg-secondary">
<div contenteditable="true" class="btn-lg"></div>
</div>
</p>
<p>
<div style="margin-right: 420px;" class="bg-secondary">
<div contenteditable="true" class="btn-lg"></div>
</div>
</p>
</div>
<div class="col-lg-4 m-bottom-half-border" >
<h4 class="text-center">Mother Nature</h4>
</div>
<div class="col-lg-4 m-bottom-half-border" >
<h4 class="text-center">Measurement</h4>
<p>
<div style="margin-right: 70px;" class="bg-secondary">
<div contenteditable="true" class="btn-lg"></div>
</div>
</p>
</div>
</div>
</div>
</div>
</div><!-- ./col-md-11 -->
</div><!-- ./row -->
</body>
</html>
from Diagonal cascading elements and 90º borders (cause-and-effect diagram like) for fishbone list using HTML, CSS and/or Javascript
No comments:
Post a Comment