我组织了一些 div 和段落来创建六个不同的列表，所有列表都连接到一个箭头。 我已经能够创建看起来像鱼骨图的东西，正如你们在下面的示例中看到的那样:
灰色(bg-secondary 类)div 是动态添加的。六个 div 在 col 内有两个蓝色边框(以模拟它们之间的 90° 分隔符)
我现在真正努力实现的是对 Angular 边框和级联列表，如下所示:
第二张图片在画图软件中编辑得不好，但不同之处在于: 我没有采用 90° 边框，而是采用对 Angular 线边框，模拟 45° 分隔符。除此之外，我还缩进了列表(边距根据元素数量增加)。
我不知道如何实现 45° 边界。事实上，我添加了那些靠右的样式也使 div 变小了。你们有什么建议？
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="bad8d5d5cec9cec8dbcafa8e9489948b" rel="noreferrer noopener nofollow">[email protected]</a>/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/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="5b2b342b2b3e297531281b6a756a6f756c" rel="noreferrer noopener nofollow">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="51333e3e25222523302111657f627f60" rel="noreferrer noopener nofollow">[email protected]</a>/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>
最佳答案
您可以通过添加::before 来放置对 Angular 线和::after 来对 Angular 隐藏特定部分来实现此目的。
如果将其添加到 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);
}
关于javascript - 使用 HTML、CSS 和/或 Javascript 的鱼骨列表的对 Angular 级联元素和 90° 边框(类似因果图)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/73589802/