Version 2 of drawing multiple horizontal lines on a webpage

Reading about how to use CSS transition to animate an hamburger icon so that it turns into an X upon being clicked, I realize that drawing a line on a webpage can be much simpler.

Previously, I used the border-top property to draw horizontal lines. But we can actually make each div element itself appear as a line.

So I replicate the image of multiple horizontal lines that vaguely suggests moving clouds above the horizon:

with the following HTML code:

<div class="background">
  <div class="line line--cantileverFromRight"></div>
  <div class="line line--shortBar"></div>
  <div class="line line--cantileverFromLeft"></div>
  <div class="line line--longBar"></div>
  <div class="line line--horizon"></div>
</div>

Now each line corresponds to one div element. The entire HTML code now looks very simple.

Note that I use two classes for each line div. The line class takes care of the appearance of a line while the line--modifier classes set the position and length of each line. This is because all the lines are white and 1px-thin. If each line differs in color and thickness, we do not have to have two classes for each line div.

Now we build up the associating CSS code step by step. First the background div:

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

This is the same as before, except for the addition of padding-bottom: 15%. This way, it clearly defines the vertical space within which the lines are drawn.

Next, we use the line class to set the apperance of all the lines:

.line {
  background-color: white;
  height: 1px;  
}

Instead of using theborder-top property, now we make each div itself a thin, horizontal line.

Then each line has an additional class that defines its position. To style the topmost line, we have

.line--cantileverFromRight {
  margin-left: 30%;
  width: 70%;
}

Previously, we enclosed the div element for a line with a flexbox that right-aligns the line. Instead, we now use margin-left to set the point from which we draw a horizontal line. If the values for the margin-left and the width add up to 100%, then it’s a cantilever from the right side of a page.

For the second line from the top, we style it this way:

.line--shortBar {
  margin-left: 10%;
  margin-top: 5%;
  width: 30%;  
}

We again use the margin-left to set the position from which we draw a line. This is the same as before. In addition, we now use the margin-top property to set the vertical distance from the line above. This way, it’s very clear where the line is drawn from.

Similarly, the other two lines below are styled as follows:

.line--shortBar {
  margin-left: 10%;
  margin-top: 5%;
  width: 30%;  
}
.line--cantileverFromLeft {
  margin-left: 0;
  margin-top: 5%;
  width: 60%;  
}

The margin-left: 0 for the line--cantileverFromLeft class is redundant, but it helps us see the exact position from which the line is drawn.

Finally, the horizon is drawn this way:

.line--horizon {
  margin-top: 12%;
  width: 100%;
}

In summary, the line class sets the overall appearance of each line, with the background-color and height properties. Then each line’s left-most position is set with margin-left and margin-top. And of course each line’s length is set with width. All set in relative terms to the browser window width so that the aspect ratio of the image won’t get distorted.

So the CSS code is clearly structured and easy for other people and your future self to quickly figure out.

One drawback of not using the border-top property to draw a horizontal line is that we can’t easily draw dotted or dashed lines anymore.