用手风琴画线

Question

我在手风琴里面有手风琴。我想绘制从手风琴标题到最后一个子手风琴元素的垂直线以及从垂直线到每个子手风琴元素的水平线。

这是我所拥有的：

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

JSFiddle

我想得到什么：

我怎样才能做到这一点？

Answer 1

这是一个使用一些背景和伪元素的想法。在多行内容或更多嵌套元素的情况下，您可能需要进行一些调整。

.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;
}
/**/