Draw multiple horizontal lines on a webpage

Now that we know how to draw a single horizontal line of three kinds (the horizon, a cantilever, and a bar) on a webpage, let’s see how we can draw multiple horizontal lines by combining these three types:

To make this image look appealing somehow, I’ve arranged lines in a way that suggests moving clouds above the horizon.

The horizon is placed at one-third from the bottom, following the Rule of Thirds in photography composition. As I set the overall height of this image 45% of the screen width, the distance between the horizon and the bottom edge of the image is then 15%.

To make the horizon looks different from the other four lines above (even though they are all white, thin, solid lines), I place these lines closer to each other compared to the horizon. So the four lines are 5% away from each other while the horizon is 12% away from the last of the four lines.

To create a sense of these four lines as part of the space above the image (to enhance their association with clouds in the sky), the distance to the top from the topmost line is set to be very short (3%).

In sum, the distances are set to be (from top) 3%, 5%, 5%, 5%, 12%, and 15%. Now we implement these with HTML/CSS code.

I start writing the HTML code with this:

<div class="background">

</div>

The .background class container sets the background color and to locate the first horizontal line in CSS:

.background {
  background-color: grey;
  padding-top: 3%;
}

Next, the first horizontal line, which is a cantilever from the right side:

<div class="background">
  <div class="cantilever__background--fromRight">
    <div class="cantilever--fromRight"></div>
  </div>
</div>

with the following CSS added:

.cantilever__background--fromRight {
  display: flex;
  justify-content: flex-end;
  padding-bottom: 5%;
}
.cantilever--fromRight {
  border-top: 1px solid white;
  width: 70%;
}

Unlike when we draw only a cantilever, we specify only the padding-bottom property to set the vertical distance to the next horizontal line. Since we use the border-top property to draw a line, this lets the CSS code sort of speak itself. If we used the border-bottom to draw a line, then using the padding-top to set the distance to the line immediately above makes more sense.

We then add the second line, which is a bar:

<div class="background">
  <div class="cantilever__background--fromRight">
    <div class="cantilever--fromRight"></div>
  </div>
  <div class="bar__background--short">
    <div class="bar--short"></div>
  </div>
</div>

with the following additional CSS code:

.bar__background--short {
  padding-bottom: 5%;
}
.bar--short {
  border-top: 1px solid white;
  margin-left: 10%;
  width: 30%;
}

Likewise, the third line, a cantilever from the left side, and the fourth line are drawn by:

<div class="background">
  <div class="cantilever__background--fromRight">
    <div class="cantilever--fromRight"></div>
  </div>
  <div class="bar__background--short">
    <div class="bar--short"></div>
  </div>
  <div class="cantilever__background--fromLeft">
    <div class="cantilever--fromLeft"></div>
  </div>
  <div class="bar__background--long">
    <div class="bar--long"></div>
  </div>
</div>

with the following CSS code added:

.cantilever__background--fromLeft {
  display: flex;
  justify-content: flex-start;
  padding-bottom: 5%;
}
.cantilever--fromLeft {
  border-top: 1px solid white;
  width: 60%;
}
.bar__background--long {
  padding-bottom: 12%;
}
.bar--long {
  border-top: 1px solid white;
  margin-left: 50%;
  width: 40%;
}

Finally, we add the horizon to complete the image:

<div class="background">
  <div class="cantilever__background--fromRight">
    <div class="cantilever--fromRight"></div>
  </div>
  <div class="bar__background--short">
    <div class="bar--short"></div>
  </div>
  <div class="cantilever__background--fromLeft">
    <div class="cantilever--fromLeft"></div>
  </div>
  <div class="bar__background--long">
    <div class="bar--long"></div>
  </div>
  <div class="horizon__background">
    <div class="horizon"></div>
  </div>
</div>

with the addition of the following CSS code:

.horizon__background {
  padding-bottom: 15%;
}
.horizon {
  border-top: 1px solid white;
  width: 100%;
}

In summary, first enclose all the lines with a div that sets the background color and the top-padding. Then use the padding-bottom property to regulate the distance between any pair of lines.

Of course, the same image can be drawn with different HTML/CSS code, but the way introduced here is at least one of the best ways to let the code speak itself about what’s being drawn. Such an effort is invaluable to maintain the code by someone else or by your future self.