Is it possible to draw vertical lines which have different lengths with css?

Question

I can draw vertical lines in background using this answer. And this answer draws same length of vertical lines.

But I'd like to draw the following lines. (5th line is a bit longer than others.)

Currently, I drew these lines with 1px width divs. But after checking the above answer, I am wondering if I can draw only via css. But still not sure if it's possible.

Looking forward to any advices. Thanks in advance.

Answer 1

Here is an easier idea using repeating-linear-gradient

.line {
  height: 50px;
  background:
   repeating-linear-gradient(to right, red   0 4px, transparent 4px 80px),
   repeating-linear-gradient(to right, green 0 4px, transparent 4px 20px) left/100% 70% no-repeat;

}

<div class="line"></div>

Using CSS variables to easily control everything:

div.line {
  --d:20px; /* distance between lines */
  --l:4px;  /* length of line */
  --n:4;    /* how many small lines between the big one*/
  --h:70%;  /* Height of small lines*/
  --o:0;    /* When the big line will start */

  background:
    repeating-linear-gradient(to right, 
      red   0 var(--l), transparent var(--l) calc((var(--l) + var(--d))*(var(--n) + 1))) left calc(var(--o)*((var(--l) + var(--d)))) center no-repeat,
    repeating-linear-gradient(to right, 
      green 0 var(--l), transparent var(--l) calc(var(--l) + var(--d))) left/100% var(--h) no-repeat;
      
  margin:10px;
  height: 50px;
}

<div class="line"></div>
<div class="line" style="--n:10;--h:50%;--o:2"></div>
<div class="line" style="--n:2;--d:35px;--l:2px;--o:3"></div>
<div class="line" style="--n:8;--l:10px;--d:5px;--o:8;--h:90%;"></div>

Answer 2

You can make background with same length, then using before or after to create a vertical line with height longer and put it in the middle of the background

div {
  width: 450px;
  height: 100px;
  position: relative;
  background-color: black;
  background-size: 10% 50%;
  background-repeat: repeat-x;
  background-image: linear-gradient(to right, green 4px, transparent 1px, transparent);
  background-position: -2px center;
}
div:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 4px;
  height: 70px;
  background-color: green;
}

<div></div>

Answer 3

.main_div
{
  position:absolute;
  width:90%;
  border:1px solid;
  height:50%;
  display:flex;
  justify-content:space-between;
}
.div_one
{
  position:relative;
  width:1%;
  border:1px solid;
  height:50%;
  background-color:black;
}
.div_five
{
  position:relative;
  width:1%;
  border:1px solid;
  height:60%;
  background-color:black;
}

<div class="main_div">
  <div class="div_one"></div>
  <div class="div_one"></div>
  <div class="div_one"></div>
  <div class="div_one"></div>
  <div class="div_five"></div>
  <div class="div_one"></div>
  <div class="div_one"></div>
  <div class="div_one"></div>
  <div class="div_one"></div>
  <div class="div_one"></div>
</div>