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.l1
  div.title
    h1 h1
  div.l2-box
    div.horizontal
    div.virtical
      div.virtical-line
    div.l2
      div.horizontal
      div.title
        h2 h2
    div.l2
      div.horizontal
      div.title
        h2 h2
    div.l2
      div.horizontal
      div.title
        h2 h2

/*Downloaded from https://www.codeseek.co/postor/a-pen-by-junjun-VdLgrJ */
    h1,h2 {
  margin: 0;
  height: 40px;
  line-height: 40px;
  border: 1px solid blue;
}
.l1 {
  display: flex;
}

h1,.l2-box {
  width: 200px;
}

.l2-box {
  position: relative;
}

.l2-box .horizontal {
  border-top: 1px solid red;
  position: absolute;
  width: 50px;
  left: -100px;
  top: 20px;
}
.l2-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;
}

.l2 {
  position: relative;
}

.l2-box .l2 .horizontal {
  left: -50px;
}


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

Comments