A Pen by junjun

Thumbnail
This awesome code was written by postor, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright postor ©
  • HTML
  • CSS
  • JavaScript
    div.level
  div.title
    h1 h1       
  div.box
    div.horizontal-parent
    div.virtical
    div.level
      div.horizontal
      div.title
        h2 h2        
      div.box
        div.horizontal-parent
        div.virtical
        div.level
          div.horizontal
          div.title
            h2 h31
        div.level
          div.horizontal
          div.title
            h2 h32
    div.level
      div.horizontal
      div.title
        h2 h2
    div.level
      div.horizontal
      div.title
        h2 h2

/*Downloaded from https://www.codeseek.co/postor/a-pen-by-junjun-ERjMbY */
    .title {
  
  height: 40px;
  line-height: 40px;
  border: 1px solid blue;
  padding-right: 100px;
}

h1,h2 {
  margin: 0;
}

.level {
  display: flex;
  position: relative;
}

.box {
  width: 200px;
}

.box {
  position: relative;
}

.box .horizontal-parent {
  border-top: 1px solid red;
  position: absolute;
  width: 50px;
  left: -100px;
  top: 20px;
}
.box .virtical {
  box-sizing: border-box;
  height: 100%;
  width: 1px;
  position: absolute;
  border-top: 20px solid #fff;
  border-bottom: 20px solid #fff;
  top: 0;
  left: -50px;
  background-color: red;
}

.level {
  position: relative;
}

.box .level .horizontal {
  
  border-top: 1px solid red;
  position: absolute;
  width: 50px;
  left: -50px;
  top: 20px;
}


/*Downloaded from https://www.codeseek.co/postor/a-pen-by-junjun-ERjMbY */
    

Comments