html – 用手风琴画线条

概述手风琴里面有手风琴.我想绘制从手风琴的标题到最后一个儿童手风琴元素的垂直线和从垂直线到每个儿童手风琴元素的水平线. 这是我有的： <div id="accordion3" class="collapseblock"> <div class="cardsmall"> <div class="cardsmall-header"> <span class="arrowed" id 手风琴里面有手风琴.我想绘制从手风琴的标题到最后一个儿童手风琴元素的垂直线和从垂直线到每个儿童手风琴元素的水平线.

这是我有的：

<div ID="accordion3" >  <div >    <div >      <span  ID="headingGeneral" data-toggle="collapse" data-target="#collapseGeneralTab" aria-expanded="false" aria-controls="collapseGeneralTab">                                        Test1                                    </span>    </div>    <div ID="collapseGeneralTab"  aria-labelledby="headingGeneral" data-parent="#accordion3">      <div >        Example1      </div>    </div>  </div>  <div >    <div >      <span  ID="headingCurrency" data-toggle="collapse" data-target="#collapseCurrency" aria-expanded="false" aria-controls="collapseCurrency">                                        Test2                                    </span>    </div>    <div ID="collapseCurrency"  aria-labelledby="headingCurrency" data-parent="#accordion3">      <div >        <div ID="accordion4" >          <div >            <div >              <span  ID="headingOffers" data-toggle="collapse" data-target="#collapSEOffers" aria-expanded="false" aria-controls="collapSEOffers">                                                        Test2.1                                                    </span>            </div>            <div ID="collapSEOffers"  aria-labelledby="headingOffers" data-parent="#accordion4">              <div >                Example2.1              </div>            </div>          </div>          <div >            <div >              <span  ID="headingPricing" data-toggle="collapse" data-target="#collapsePricing" aria-expanded="false" aria-controls="collapsePricing">                                                        Test2.2                                                    </span>            </div>            <div ID="collapsePricing"  aria-labelledby="headingPricing" data-parent="#accordion4">              <div >                Example2.2              </div>            </div>          </div>        </div>      </div>    </div>  </div></div>

JSFiddle

我想得到什么：

我怎样才能做到这一点？

解决方法 这是一个使用一些背景和伪元素的想法.如果是多行内容或更多嵌套元素,您可能需要进行一些调整.

.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" ><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 >    <div >      <span  ID="headingTest1" data-toggle="collapse" data-target="#collapseTest1Tab" aria-expanded="false" aria-controls="collapseTest1Tab">										Test1									</span>    </div>    <div ID="collapseTest1Tab"  aria-labelledby="headingTest1" data-parent="#accordion3">      <div >        Example1      </div>    </div>  </div>  <div >    <div >      <span  ID="headingTest2" data-toggle="collapse" data-target="#collapseTest2" aria-expanded="false" aria-controls="collapseTest2">										Test2									</span>    </div>    <div ID="collapseTest2"  aria-labelledby="headingTest2" data-parent="#accordion3">      <div >        <div ID="accordion4" >          <div >            <div >              <span  ID="headingTest21" data-toggle="collapse" data-target="#collapseTest21" aria-expanded="false" aria-controls="collapseTest21">														Test2.1													</span>            </div>            <div ID="collapseTest21"  aria-labelledby="headingTest21" data-parent="#accordion4">              <div >                Example2.1              </div>            </div>          </div>          <div >            <div >              <span  ID="headingTest22" data-toggle="collapse" data-target="#collapseTest22" aria-expanded="false" aria-controls="collapseTest22">														Test2.2													</span>            </div>            <div ID="collapseTest22"  aria-labelledby="headingTest22" data-parent="#accordion4">              <div >                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;}/**/

总结

以上是内存溢出为你收集整理的html – 用手风琴画线条全部内容，希望文章能够帮你解决html – 用手风琴画线条所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。