html - 用手风琴画线
问题描述
我在手风琴里面有手风琴。我想从手风琴的标题到最后一个子手风琴的元素绘制垂直线,从垂直线到每个子手风琴的元素绘制水平线。
这是我所拥有的:
<div id="accordion3" class="collapseblock">
<div class="cardsmall">
<div class="cardsmall-header">
<span class="arrowed" id="headingGeneral" data-toggle="collapse" data-target="#collapseGeneralTab" aria-expanded="false" aria-controls="collapseGeneralTab">
Test1
</span>
</div>
<div id="collapseGeneralTab" class="collapse" aria-labelledby="headingGeneral" data-parent="#accordion3">
<div class="cardsmall-content">
Example1
</div>
</div>
</div>
<div class="cardsmall">
<div class="cardsmall-header">
<span class="arrowed" id="headingCurrency" data-toggle="collapse" data-target="#collapseCurrency" aria-expanded="false" aria-controls="collapseCurrency">
Test2
</span>
</div>
<div id="collapseCurrency" class="collapse" aria-labelledby="headingCurrency" data-parent="#accordion3">
<div class="cardsmall-content">
<div id="accordion4" class="collapseblock">
<div class="cardsmall">
<div class="cardsmall-header">
<span class="arrowed" id="headingOffers" data-toggle="collapse" data-target="#collapseOffers" aria-expanded="false" aria-controls="collapseOffers">
Test2.1
</span>
</div>
<div id="collapseOffers" class="collapse" aria-labelledby="headingOffers" data-parent="#accordion4">
<div class="cardsmall-content">
Example2.1
</div>
</div>
</div>
<div class="cardsmall">
<div class="cardsmall-header">
<span class="arrowed" id="headingPricing" data-toggle="collapse" data-target="#collapsePricing" aria-expanded="false" aria-controls="collapsePricing">
Test2.2
</span>
</div>
<div id="collapsePricing" class="collapse" aria-labelledby="headingPricing" data-parent="#accordion4">
<div class="cardsmall-content">
Example2.2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
我想得到什么:
我怎样才能做到这一点?
解决方案
这是一个使用一些背景和伪元素的想法。在多行内容或更多嵌套元素的情况下,您可能需要进行一些调整。
.cardsmall {
background: linear-gradient(#000,#000) 5px calc(100% - 16px)/2px calc(100% - 40px) no-repeat;
display: table;
margin-bottom: 3px;
margin-left: 20px;
margin-top: 10px;
}
.cardsmall .cardsmall {
margin-top: 0;
}
.cardsmall {
position:relative;
}
.cardsmall .cardsmall:before {
content: "";
position: absolute;
top: 13px;
right: calc(100% + 3px);
width: 30px;
height: 2px;
background: #000;
}
.cardsmall .cardsmall:last-child:after {
content: "";
position: absolute;
top: 15px;
right: calc(100% + 5px);
width: 30px;
height: 100vh;
background: #fff;
}
.cardsmall-header .arrowed {
display: inline-block;
position: relative;
cursor: pointer;
}
.cardsmall-header .arrowed:after {
content: "\f078";
display: inline-block;
font-family: 'FontAwesome';
position: relative;
right: 0;
transition: all 0.3s;
}
.arrowed[aria-expanded="true"]:after {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
transform: rotate(180deg);
}
.cardsmall-header {
border-radius: calc(.25rem - 1px);
}
.cardsmall-content {
padding: 10px 5px 5px 20px;
background:linear-gradient(#000,#000) 5px 23px/12px 2px no-repeat;
overflow: hidden;
}
.collapseblock {
display: block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<div id="accordion3" class="collapseblock">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script type="text/javascript" src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="cardsmall">
<div class="cardsmall-header">
<span class="arrowed" id="headingTest1" data-toggle="collapse" data-target="#collapseTest1Tab" aria-expanded="false" aria-controls="collapseTest1Tab">
Test1
</span>
</div>
<div id="collapseTest1Tab" class="collapse" aria-labelledby="headingTest1" data-parent="#accordion3">
<div class="cardsmall-content">
Example1
</div>
</div>
</div>
<div class="cardsmall">
<div class="cardsmall-header">
<span class="arrowed" id="headingTest2" data-toggle="collapse" data-target="#collapseTest2" aria-expanded="false" aria-controls="collapseTest2">
Test2
</span>
</div>
<div id="collapseTest2" class="collapse" aria-labelledby="headingTest2" data-parent="#accordion3">
<div class="cardsmall-content">
<div id="accordion4" class="collapseblock">
<div class="cardsmall">
<div class="cardsmall-header">
<span class="arrowed" id="headingTest21" data-toggle="collapse" data-target="#collapseTest21" aria-expanded="false" aria-controls="collapseTest21">
Test2.1
</span>
</div>
<div id="collapseTest21" class="collapse" aria-labelledby="headingTest21" data-parent="#accordion4">
<div class="cardsmall-content">
Example2.1
</div>
</div>
</div>
<div class="cardsmall">
<div class="cardsmall-header">
<span class="arrowed" id="headingTest22" data-toggle="collapse" data-target="#collapseTest22" aria-expanded="false" aria-controls="collapseTest22">
Test2.2
</span>
</div>
<div id="collapseTest22" class="collapse" aria-labelledby="headingTest22" data-parent="#accordion4">
<div class="cardsmall-content">
Example2.2
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
这是添加的相关CSS:
.cardsmall {
background: linear-gradient(#000,#000) 5px calc(100% - 16px)/2px calc(100% - 40px) no-repeat;
}
.cardsmall .cardsmall {
margin-top: 0;
}
.cardsmall {
position:relative;
}
.cardsmall .cardsmall:before {
content: "";
position: absolute;
top: 13px;
right: calc(100% + 3px);
width: 30px;
height: 2px;
background: #000;
}
.cardsmall-content {
background:linear-gradient(#000,#000) 5px 23px/12px 2px no-repeat;
overflow:hidden; /*needed to hide the overflow of the after element below*/
}
/*This is to hide the line when the last child is expanded*/
.cardsmall .cardsmall:last-child:after {
content: "";
position: absolute;
top: 15px;
right: calc(100% + 5px);
width: 30px;
height: 100vh;
background: #fff;
}
/**/
推荐阅读
- jupyter-notebook - 在 RISE 演示文稿中按键时一一显示项目符号
- conv-neural-network - 从 ImageNet 直接推断我的数据集(没有训练或微调)?
- sql - SQL中平均计数的高效查询
- python - 以秒格式绘制时间序列
- sql-server - 如何将 SSIS 查找转换中的代码页修复为 65001?
- matlab - 使用 psychtoolbox 构建实验
- curl - 如何避免在 Jenkins 控制台输出上打印 curl 命令?
- python - 风筝已安装但无法打开
- plugins - 看来我必须在 Xcode 上安装 XcodeHacking 才能使用 clang 插件。有什么影响?它会影响我的代码的安全性吗?
- python - matplotlib.use('Agg')power BI集成python中的属性错误